Yes, you can get such slices of custom angles using either one of the following two methods: If you don’t need the slices to be elements themselves, the you can simply do it with one element and linear gradients – see this rainbow wheel I did last month. If you need the slices to be … Read more
I’d suggest, with the following HTML: <div></div> The CSS: div { width: 20em; height: 20em; border-radius: 50%; background-color: red; border: 4px solid #fff; box-shadow: 0 0 0 5px red; } div { width: 20em; height: 20em; border-radius: 50%; background-color: red; border: 4px solid #fff; box-shadow: 0 0 0 5px red; } <div></div> JS Fiddle demo. … Read more
SUMMARY: Depending on what is needed it can be tricky but the basic approach is pretty straight forward. This approach is a little different from my first thought… but this has the same result. I made a black/transparent pattern for the circle and set it to :before. The circle is then transformed rotate(180deg) and moved … Read more
Using Background Gradient This requires no extra html markup. I have tested it on Firefox (and it is confirmed to work on Safari and Chrome as well, see comments). It makes the background of the eye the purple color some distance in from the edge, and then the yellow the rest of that using a … Read more
All you have to do is to change border-radius: 40px to border-radius: 50%. .oval { width: 160px; height: 80px; background: #a84909; border-radius: 50%; } <div class=”oval”></div>
The best way I’ve found to achieve this with all CSS and HTML (no images, etc.) is by using CSS3 gradients, per Lea Verou. From her solution: div.round { background: -moz-radial-gradient(0 100%, circle, rgba(204,0,0,0) 14px, #c00 15px), -moz-radial-gradient(100% 100%, circle, rgba(204,0,0,0) 14px, #c00 15px), -moz-radial-gradient(100% 0, circle, rgba(204,0,0,0) 14px, #c00 15px), -moz-radial-gradient(0 0, circle, rgba(204,0,0,0) … Read more
A filter will work: .shadowed { -webkit-filter: drop-shadow(0px 2px 2px rgba(130,130,130,1)); filter : drop-shadow(0px 2px 2px rgba(130,130,130,1)); -ms-filter : “progid:DXImageTransform.Microsoft.Dropshadow(OffX=0, OffY=2, Color=”#444″)”; filter : “progid:DXImageTransform.Microsoft.Dropshadow(OffX=0, OffY=2, Color=”#444″)”; } Working Example : http://codepen.io/tolmark12/pen/JopNeR?editors=110 Learn more at : Creating a true cross browser drop shadow
Like this : .arrow { border: solid 10px transparent; border-right-color: #FFF; } Demo : http://jsfiddle.net/sparkup/edjdxjf2/ UPDATE : It can also be achieved without empty elements with the css property :before element:before { content: “”; position: absolute; top: 50%; // half way down (vertical center). margin-top: -15px; // adjust position, arrow has a height of 30px. … Read more
You could use a skewed and rotated pseudo element to create a responsive triangle under the link : DEMO (resize the result window to see how it reacts) The triangle maintains it’s aspect ratio with the padding-bottom property. If you want the shape to adapt it’s size according to it’s content, you can remove the … Read more
You can do it without pseudo-elements, just with border-image: linear-gradient .fancy-border { width: 150px; height: 150px; text-align:center; border-top: 5px solid; border-image: linear-gradient(to right, grey 25%, yellow 25%, yellow 50%,red 50%, red 75%, teal 75%) 5; } <div class=”fancy-border”> my content </div>