How to round out corners when using CSS clip-path
use inset with round property : inset(0% 45% 0% 45% round 10px)
css-shapes
Make table cells square
New answer : To make the table cells square, you can use the aspect-ratio property on a div inside the td element. Like this : table { width: 90%; } td { width: 33.33%; position: relative; } td .content { aspect-ratio: 1 / 1 ; background: gold; } <table> <tr> <td><div class=”content”>1</div></td> <td><div class=”content”>1</div></td> <td><div … Read more
CSS Circle with border
You forgot to set the width of the border! Change border: red; to border:1px solid red; Here the full code to get the circle: .circle { background-color:#fff; border:1px solid red; height:100px; border-radius:50%; -moz-border-radius:50%; -webkit-border-radius:50%; width:100px; } <div class=”circle”></div>
CSS box shadow around a custom shape?
Use drop-shadow: maybe this article (box-shadow-vs-filter-drop-shadow) will help you
CSS Transform Skew [duplicate]
.red.box { background-color: red; transform: perspective( 600px ) rotateY( 45deg ); } Then HTML: <div class=”box red”></div> from http://desandro.github.com/3dtransforms/docs/perspective.html
Invert rounded corner in CSS?
In modern browsers, you can use mask-image: #aux-container { width: 100px; height: 100px; background: #f00; -webkit-mask-image: radial-gradient(circle 10px at 0 0, transparent 0, transparent 20px, black 21px); } <div id=”aux-container”></div> http://jsbin.com/eViJexO/1/ Additionally, take a look at http://www.html5rocks.com/en/tutorials/masking/adobe/, which describes how to achieve similar result using mask-box-image.
Circular percent progress bar
Considering the shape of the progress bar (rounded end/start) I would suggest using SVG. DEMO: Radial progress bar In the following example, the progress is animated with the stroke-dasarray attribute and the % numbers are incremented with jQuery: var count = $((‘#count’)); $({ Counter: 0 }).animate({ Counter: count.text() }, { duration: 5000, easing: ‘linear’, step: … Read more
Responsive grid of hexagons
Here is the demo and the repositery for the responsive grid of hexagons. The code here isn’t maintained. It was moved to github and improved so comments, issue reporting and contributions should be made there. This technique uses : the <img> tag an unordered list : each hexagon is contained in a <li> tag and … Read more
Is it possible to create an angled corner in CSS?
It’s a little difficult keeping the border, but I managed to achieve a close effect using :before and :after elements with a parent container (:before and :after don’t work on an img tag) Add a border to the container Add a before to block out a corner and offset by -1 to cover the border … Read more
CSS3 Transform Skew One Side
Try this: To unskew the image use a nested div for the image and give it the opposite skew value. So if you had 20deg on the parent then you can give the nested (image) div a skew value of -20deg. .container { overflow: hidden; } #parallelogram { width: 150px; height: 100px; margin: 0 0 … Read more