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
SVG approach: You can achieve the double curve easily with an inline SVG and the <path/> element instead of the <polygon/> element which doesn’t allow curved shapes. The following example uses the <path/> element with: 2 quadratic bezier curve commands for the 2 top curves (lines beginning with Q) 1 arc command for the big … Read more
This shape (an Isoceles Trapezoid) can be easily made using CSS3 by rotating a div with a bit of perspective. Explanation The shape is achieved by rotating an absolutely positioned pseudo-element (.container:after) along the x-axis with a perspective. We are not rotating the actual container div because it would cause the link (and any other) … Read more
If you think in 3d, you can use the perspective and rotateX() properties to alter only one or two angles of an element. This will allow you to style pseudo elements of the container to give them the desired shape and cut out the top right and bottom left corners. You can also give the … Read more
What you have there looks like a grid, which you can obtain either with many gradients on a div, either with a grid of many divs on which you apply CSS transforms. div { box-sizing: border-box; } .container { overflow: hidden; width: 32em; height: 32em; margin: 5.6em auto 0; background: silver; } .grid { transform: … Read more
You don’t need @media queries for this. This is my try, pure CSS: .x1 { overflow:hidden; } .x1 .x2 { display:block; float:left; padding: 12.5%; width:auto; height:auto; border-radius:50%; -moz-border-radius:50%; -webkit-border-radius:50%; -khtml-border-radius: 50%; background:#eee; text-align:center; position: relative; } .x1 .x2 span { position: absolute; width: 100%; left: 0; top: 48%; line-height: 1em; height: 1em; font-size: 100%; overflow: … 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>
Here are four different versions to supplement @misterManSam’s brilliant answer. 1. With Easing Explanation If you filled up a circular bowl full of liquid, it would fill faster at the bottom and top than it would in the middle (because there is more area to cover in the wider middle section). So, with that crude … Read more
From the top of my head: draw bottom half border on the element and draw top-left and top-right borders on positioned pseudo elements. /* using 4px border, 1em border radius, 1em padding */ nav ul { font: medium sans-serif; text-align: center; padding: 0; list-style-type: none; border-top: 4px solid; } nav li { display: inline-block; border-left: … Read more
When the main triangle or arrow is itself created using the CSS borders, it is impossible to add another border to it without using extra elements. The below are a few options. Option 1: Using a bigger size pseudo-element and positioning it behind the parent to produce a border-effect. .arrow-down { position: relative; width: 0; … Read more