the web has typically been a place of boxes and rectangles but an emerging css specification is going to change that. in this article i’ll introduce you to css shapes, explaining what they are and the core concepts you need to start using them.
all of the examples are linked up on github, so you can view and download the source code as starting points for your own experimentation.
what are css shapes?the css shapes specification describes geometric shapes for us in css. in level 1 of the specification, now at candidate recommendation status, shapes can be applied to floated elements only. an example is the easiest way to get started.
<div class="pre-wrap">
<pre class=" language-css"><code class=" language-css"><span class="token selector"><span class="token class">.shape</span> </span><span class="token punctuation">{</span> <span class="token property">float</span><span class="token punctuation">:</span> left<span class="token punctuation">;</span> <span class="token property">width</span><span class="token punctuation">:</span> 150px<span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span> 150px<span class="token punctuation">;</span> <span class="token property">margin</span><span class="token punctuation">:</span> 20px<span class="token punctuation">;</span> <span class="token property">shape-outside</span><span class="token punctuation">:</span> <span class="token function">circle</span>(50%)<span class="token punctuation">;</span> <span class="token punctuation">}</span></code></pre>
</div>
in the above example we add this class to an image. we float the image left, give it a width, height and a margin then use the property shape-outside to curve the text around the circle.
see the example
before going any further, using chrome head on over tohttp://betravis.github.io/shape-tools/ and drag the show shapes bookmarklet to your bookmarks bar.
if you then go to my example page and click the bookmarklet, you can see how the circle shape is drawn:
basic shapesthe shape-outside property used in our simple example can take various values. the first possibilities are referred to as “basic shapes” in the specification. these basic shapes are functions:
inset()circle()ellipse()polygon()inset()the inset() function is for defining shapes on rectangular elements, which float does for us and in most cases is adequate. there may be times when the additional control comes in useful.
the inset() function can be passed four position arguments which are offsets inwards from the element’s edges, plus a border-radius for the rectangular shape, preceded by the keyword ‘round’.
inset(top right bottom left round border-radius);
for example:
<pre class=" language-css"><code class=" language-css"><span class="token function">inset</span>(10px 20px 10px 20px round 50%)<span class="token punctuation">;</span></code></pre>
the arguments for the inset follow the same shorthand as margin, so if you want an inset of 20 pixels all around the element you could use:
<pre class=" language-css"><code class=" language-css"><span class="token function">inset</span>(10px round 50%)<span class="token punctuation">;</span></code></pre>
in my example i have used an image that h