css-shapes

When you go to the page http://m.google.com using Mobile Safari, you will see the beautiful bar on the top of the page. I wanna draw some trapeziums (US: trapezoids) like that, but I don't know how. Should I use css3 3d transform? If you have a good method to achieve it please tell me. ElHacker You can use some CSS like this: #trapezoid { border-bottom: 100px solid red; border-left: 50px solid transparent; border-right: 50px solid transparent; height: 0; width: 100px; } <div id="trapezoid"></div> It is really cool to make all this shapes, Take a look to more nice shapes at: http://css-tricks

Goal: Responsive CSS circles that: Scale with equal radius. Radius can be calculated by percent. Radius can be controlled by media queries. If solution is javascript , I still need to emulate media query triggers. I dont 'need' media queries but I do want the ability to control the radius by percentage at certain widths: @media (max-width : 320px) { .x2{padding: 50%;} } @media (min-width : 321px) and (max-width : 800px) { .x2{padding: 25%;} } @media (min-width: 801px) { .x2{padding: 12.5%;} } Here is what I have so far: http://jsfiddle.net/QmPhb/ <div class="x1"> <div class="x2"> lol dude <

Is it possible to create a circle using only HTML5 / CSS3 which has a border that only goes part way around the circle? If not, what techniques can I use to accomplish this effect? I would prefer to use pure DOM elements, but if I have to I can draw on canvas or spin up an SVG. Ana Yes, it is possible - see this: demo .circle { position: relative; margin: 7em auto; width: 16em; height: 16em; border-radius: 50%; background: lightblue; } .arc { overflow: hidden; position: absolute; /* make sure top & left values are - the width of the border */ /* the bottom right corner is the centre of the

Like this With only this code <span>1</span> http://jsfiddle.net/MafjT/ You can use this css span { display: block; height: 60px; width: 60px; line-height: 60px; -moz-border-radius: 30px; /* or 50% */ border-radius: 30px; /* or 50% */ background-color: black; color: white; text-align: center; font-size: 2em; } Because you want a circle, you need to set the same value to width, height and line-height (to center the text vertically). You also need to use half of that value to the border radius. This solution always renders a circle, regardless of content length. But, if you want an ellipse that

Is it possible to make the below gradient look more "blocky", so that instead of switching from green to red gradually, it's done in steps like the below picture? Desired effect: Currently: #gradients { background-image: -webkit-gradient(linear, left bottom, right bottom, color-stop(0, #00FF00), color-stop(0.5, #FFFF00), color-stop(1, #FF0000)); background-image: -o-linear-gradient(right, #00FF00 0%, #FFFF00 50%, #FF0000 100%); background-image: -moz-linear-gradient(right, #00FF00 0%, #FFFF00 50%, #FF0000 100%); background-image: -webkit-linear-gradient(right, #00FF00 0%, #FFFF00 50%, #FF0000