css-shapes

I drew a cloud via CSS3 using different div tags I am trying to add a border to the whole shape but I am having trouble since every shape get its own border how can I apply a border to the whole cloud? HTML: <div id="cloud"> <div id="bottom_c"></div> <div id="right_c"></div> <div id="left_c"></div> </div> CSS: * { margin: 0; padding: 0; border: 0; } body{ background-color: #4ca3ff; } #cloud { position: absolute; } #bottom_c { position: relative; top: 200px; left: 500px; width: 350px; height: 150px; background-color: #fff; border-radius: 100px; border: solid 5px black; z-index: 100; } #right_c{

I am playing with shapes in css and want to make a traditional bell shape (think Christmas bell). Here's the general shape that I'm going for (though I really don't care about the balls on the top and bottom): Here's what I have so far: http://jsfiddle.net/bhlaird/NeBtU/ #bell { left:300px; position: relative; } #bell:before, #bell:after { position: absolute; content: ""; left: 50px; top: 0; width: 180px; height:400px; background: #d3d3d3; border-radius: 150px 150px 150px 20px; -webkit-transform: rotate(15deg); -webkit-transform-origin: 0 0; } #bell:after { left: 0; -webkit-transform: rotate(

What I'd like to do: I would like to create a radial menu as shown below, considering all elements in the picture interactive, i.e the image in centre as well as the four quarters around it. It's important that the solution is cross-browser compatible. This is just a simple example as the parts dont really have to be quarters, they can be any possible number of parts : Solutions Tried So Far : I have tried using CSS3 round div with border , where the border have these images as background, but doesnt really work well, as each element has to be a stand-alone element. I heard about css-shapes,

How to draw the tick symbol using CSS? The symbols I find using Unicode isn't aesthetically-pleasing. EDIT Icon fonts are a great suggestion. I was looking for something like this . You can now include web fonts and even shrink down the file size with just the glyphs you need. https://github.com/fontello/fontello http://fontello.com/ li:before { content:'[add icon symbol here]'; font-family: [my cool web icon font here]; display:inline-block; vertical-align: top; line-height: 1em; width: 1em; height:1em; margin-right: 0.3em; text-align: center; color: #999; } You can draw two rectangles and

I'm creating a basic webpage, but for the footer there is going to be a slanted edge that will run at the bottom of the page. Where I am having issues as you are unable to add 100% on a border, as i am using bootstrap, so the page must be responsive. Is there a way to achieve this affect whilst being responsive. div { width:200px; height:80px; background: red; top:150px;left:100px; position: relative; } div:before { content: ''; position: absolute; top: 40px; right: 0; border-right: 200px solid white; border-top: 40px solid red; width: 20; } http://jsfiddle.net/2bZAW/3675/ This should work for