css-shapes

Need to draw angular sides of menubar as inner content may be the some labels or links. How about using CSS3 transform skew ? Demo .shape { width: 200px; height: 50px; -webkit-transform: skew(30deg); -moz-transform: skew(30deg); transform: skew(30deg); background: #000; margin: 20px; } Nothing much to explain here, it's a simple div element, which I've skewed by 30deg which will result in the shape you expected. Note: It's a CSS3 property, so older browsers, as well as IE will spoil your things, make sure you use CSS3 Pie . Other way to achieve this is by using :after and :before pseudo and

How can I create the following shape with CSS? I tried this to be a solution: .triangle:after { position:absolute; content:""; width: 0; height: 0; margin-top:1px; margin-left:2px; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid white; } .triangle:before { position:absolute; content:""; width: 0; height: 0; border-left: 12px solid transparent; border-right: 12px solid transparent; border-bottom: 12px solid black; } You can see it working at Triangle . This is working, but with a trick of borders. Is there another way it could be done? Using

I'm interested in creating a loading spinner entirely in CSS but in order to do so I would need to be able to draw a open ring shape like this: The ring would draw itself around the circumference of the circle. Is this achievable in CSS? To create a circle that gradually draws it's outer path, use SVG. SVG's stroke-dasharray property will turn any path into a dashed line, which you can use to your advantage by setting the dash size to be almost as long as the path itself. Then use a CSS animation to gradually change the stroke-dashoffset to move the dash around the perimeter of your circle.

I'm trying to create a circle with CSS, which looks exactly like on the following picture: ...with only one div : <div class="myCircle"></div> and by using only CSS definitions. No SVG, WebGL, DirectX, [...] allowed. I've tried to draw a full circle and fading half of it with another div , and it does work, but I'm looking for a more elegant alternative. You could use border-top-left-radius and border-top-right-radius properties to round the corners on the box according to the box's height (and added borders). Then add a border to top/right/left sides of the box to achieve the effect. Here you

I've been working on a header with a zigzag border. One way to do this is to use images to make the zigzag effect. (1) Is there any way to create a practical cross-browser zigzag border in CSS without the use of images? I am also trying to put a textured background on this header that extends to the zigzags. However, the vertical size of the header may change and I am unable to implement the header as a single image. If I try to add a texture to both the zigzag edges and the header element, chances are, the texture will be off sync. (2) Any ideas on implementing a textured background that

I want to create shape like on this picture: I created triangle shape like on this pic, and set the margins to be in top right angle, but I dont know how to make it look divided from the left div like shown on picture. Do I have to "cut" left div to remain it's grey border and to look divided from green triangle? Is there any idea how to do this? EDIT: I am using fixed navigation bar on page, so when i scroll if div is position:absolute, navigation bar goes behind div. space between green triangle and rest of div should be transparent, because i am using image as page background David Thomas I

I have two divs, both with 0.6 opacity. I need them to overlap but retain their opacity and not create a new combined opacity level. I can't use an image. EDIT -- The little circle is supposed to have a canvas element in it. Not sure if pseudo-elements would be the best solution. Is there anyway to do this with CSS, or should I just use canvas? example - http://dabblet.com/gist/1566209 HTML: <div id="foo"> <div id="bar"> </div> </div> CSS: /** * Double Opacity */ body{background:green;} #foo{ height:150px; width:250px; background:rgba(0, 0, 0, 0.6); position:absolute; left:40%; top:20%; } #bar