You can do it with CSS, by using the css triangle trick a.tip span:before{ content:”; display:block; width:0; height:0; position:absolute; border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-right:8px solid black; left:-8px; top:7px; } Demo at http://jsfiddle.net/dAutM/7/ live snippet a.tip { position: relative; } a.tip span { display: none; position: absolute; top: -5px; left: 60px; width: … Read more
You could use a pseudo element to generate the triangle (using the famous border hack). After that, you would be able to use a thick border on the actual element (with a border-radius of 50% to make it a circle). This allows you to rotate the arrow to your liking. div { border: 20px solid … Read more
This can be done using svg. I am using Snap and jquery to make it as it makes everything a lot easier. The following snippets create random torn paper effects. Note:Support for snap – IE9 and up, Safari, Chrome, Firefox, and Opera see the specs Support for svg caniuse $(document).ready(function() { var s = Snap(‘svg’); … Read more
Cog and chain animation : I totaly refactored the code (CSS and HTML), it is now : shorter (especialy the css) simpler more realistic: corrected the synchronisation issue bteween the chain and the cogs and added a missing cog on the right because your chain seemed to be floating in the air : DEMO The … Read more
Try This div.circle { -moz-border-radius: 50px/50px; -webkit-border-radius: 50px 50px; border-radius: 50px/50px; border: solid 21px #f00; width: 50px; height: 50px; } div.square { border: solid 21px #f0f; width: 50px; height: 50px; } <div class=”circle”> <img/> </div> <hr/> <div class=”square”> <img/> </div> More here
There are different approaches that can be adopted to create this shape. Below is a detailed description of possibilities: SVG Based Approaches: SVG is the recommended way to create such shapes. It offers simplicity and scale-ability. Below are a couple of possible ways: 1- Using Path Element: We can use SVG‘s path element to create … Read more
In order to achieve this, you should consider altering your markup in order to make your html more efficient. This can be achieved using a pseudo element. I’ll address each point individually, and put it all together at the end of my answer. First of all, Use pseudo elements to avoid extra elements You could … Read more
There are several approaches to make a transparent arrow over an image with CSS. The two I will describe involve pseudo elements to minimize markup and have the same output. You can also see an SVG approach at the end of this answer : The transparent effect on the black part arround the arrow is … Read more
I’d suggest, given the following mark-up: #box { width: 10em; height: 6em; border: 4px solid #ccc; background-color: #fff; position: relative; } #box::before, #box::after { content: ”; position: absolute; top: 0; right: 0; border-color: transparent; border-style: solid; } #box::before { border-width: 1.5em; border-right-color: #ccc; border-top-color: #ccc; } #box::after { border-radius: 0.4em; border-width: 1.35em; border-right-color: #0c0; border-top-color: … Read more
With CSS box-shadows You can use multiple box-shadows with several colours on a rounded div. They need to be seperated by a comma: #circles { background-color: red; width: 100px; height: 100px; border-radius: 50%; box-shadow: 10px 0 0 -2px #f8ff00, 20px 0 0 -4px #009901, 30px 0 0 -6px #3531ff; } <div id=”circles”></div> output : Browser … Read more