Shape your code: CSS Shapes

In the AWMPro issue number 15 we dealt with CSS animations without additional JavaScript. This article takes it one step further and is about creating geometrical shapes by CSS.

This article first appeared in the AWMpro #16.

Shapes created with CSS have the advantage of not needing external fi les for displaying them. An element created with CSS is easily alterable and always pixelperfect, even on high-definition screens. With CSS every conceivable shape can be generated: parallelograms, trapezoids, ellipses and even stars, hearts or more complex graphics, basically everything your heart desires. You could create icons with complex animations or visually pleasing buttons.

css2

○ Circles ○

A circle is easily done in CSS. All we need is a HTML block element, which is usually square. To create round corners we need CSS, more specifi cally the CSS property “border-radius”: to create a circle, set the “border-radius” to 50%, and define its size using “width” and “height”. To make the element visible it needs a color.

 

div.circle {  
 border-radius: 50%;
 width: 100px; 
 height: 100px; 
 background-color: #000;
 }

With a small adjustment, this can also be used to design an ellipse, all we need are different values for the height and the width.

div.circle { 
 width: 200px;
 height: 100px;
 border-radius: 50%;
 background-color: #000;
 }
∆ Triangles  ∆

To create a triangle there are a few more things to consider. First of all, width and height need to be set to zero. The width and the distance between the corners and the lower midpoint are defi ned using the CSS properties “border-left ” and “border-right”. The height and orientation are defined using “border-bottom” or “border-top”. “border-bottom” will produce a triangle facing upward, “border-top” a triangle facing downward.

div.triangle { 
 width: 0; 
 height: 0; 
 border-left: 100px solid transparent; 
 border-right: 100px solid transparent; 
 border-bottom: 200px solid #000;
 }
 Complex geometric figures 

We have shown, that simple geometric figures can be created rather easily. Complex geometric fi gures consist of multiple of these basic elements. A star for example can be created by using two triangles facing diff erent directions.

A heart shape can also be created by layering elements. To create one of the “pseudo” elements “:before” and “:after” are used. This time we need a square block element, as described before. Just like the circle the corners are rounded by using “border-radius”, but only two of the corners. In order to get this done every corner needs to be defi ned separately (see code example). In the last step both elements are turned 45 and -45 degrees respectively in opposing directions.

div.heart {  
 position: relative;
 }
 div.heart:before, div.heart:after {  
 position: absolute;  
 content: "";  
 left: 50px;   top: 0;  
 width: 50px;  
 height: 80px;  
 background: red;  
 border-radius: 50px 50px 0 0;  
 transform: rotate(-45deg);  
 transform-origin: 0 100%;
 }
 div.heart:after { 
  left: 0;  
 transform: rotate(45deg);  
 transform-origin: 100% 100%;
 }

This article only covers a minority of the possibilities of CSS shape-building. The internet is full of diverse example of shapes generated with CSS.

Categories
Know-HowTutorials
No Comment

Leave a Reply

Der Countdown läuft! AC Kickoff 2018!

Ab morgen gibt es 1€ extra pro Lead*!
Jetzt schnell noch Kampagnen anpassen: https://t.co/gRyoFvvLUN

Mehr Infos gibt es hier: https://t.co/x1l5EpfZRG

*Lead = Double Opt In

AC Kickoff 2018: Amateurcommunity PPL + Revshare stornofrei!
Mehr erfahren -> https://t.co/MPlOex9UU5

Good things come to those who wait – And you have clearly waited enough for the shiny new Webmasterchannel! 🤩🤩🤩

Check out all about it on the blog.
https://t.co/sEK2JWViMM

And because we are working on our own page and the #SEO on it atm - have some cool #SeoTips ! 👌

Magazine

RELATED BY