Wonderful CSS Shapes (CSS graphics)

The development of CSS has become more and more powerful today. The rapid changes in its grammar, so many things that could not be done before, can now be very easy to do. Today we are going to introduce some of the more powerful CSS features:

• Clip-path
• Shape-outside

Shape means graphics, CSS shapes is the meaning of CSS graphics, that is, using CSS to generate a variety of graphics (round, rectangle, ellipse, polygon and other geometry).

Before CSS3, we could do only rectangles, boxy, and rules.

CSS3

CSS3 out, we have a wider cast of space, through

• border-radius
• border
• transform
• Pseudo-Element mates
• Gradient Gradient

We are able to make very many geometries.

Remove the most common rectangles, circles ( border-radius ), and slightly enumerate some of the other geometries:

Triangle

A triangle is typically simulated with a transparent border:

. traingle {width:0;height:0;border-left:50px Solid transparent;border-right:50px solid Transparent;border-bottom: 100px solid Yellowgreen;}

Cut Corners

The method in CSS Secret uses multiple linear gradients to achieve tangent angles.

. notching {    width:40px;    height:40px;    padding:40px;    Background:linear-gradient (135deg, Transparent 15px, Yellowgreen 0) top left,        linear-gradient ( -135deg, Transparent 15px, Yellowgreen 0) Top right,        linear-gradient ( -45deg, Transparent 15px, Yellowgreen 0) Bottom Right,
   linear-gradient (45deg, Transparent 15px, Yellowgreen 0) bottom left;    background-size:50% 50%;    Background-repeat:no-repeat;}

Trapezoidal

Using pseudo-elements and rotating perspective to achieve trapezoid:

. trapezoid{    position:relative;    width:60px;    padding:60px;}. trapezoid::before{    content: "";    Position:absolute;    top:0; right:0; bottom:0; left:0;    Transform:perspective (20px) ScaleY (1.3) Rotatex (5deg);    Transform-origin:bottom;    Background:yellowgreen;}

Of course, there is another simpler way to do this is to use the border to construct two transparent triangles on both sides of the rectangle, with the help of the construction triangle above:

. trapezoid {    position:relative;    width:60px;    border-top:60px solid yellowgreen;    border-left:40px solid transparent;    border-right:40px solid Transparent;}

Pentagon

Trapezoidal plus a triangle, it is easy to combine into a pentagon, here need to use a pseudo-element implementation:

. pentagon {    position:relative;    width:60px;    border-bottom:60px solid yellowgreen;    border-left:40px solid transparent;    border-right:40px solid Transparent; }.pentagon::before {    content: "";    Position:absolute;    top:60px;    Left: -40px;    border-top:60px solid yellowgreen;    border-left:70px solid transparent;    border-right:70px solid Transparent;}

Hexagon

Look at the trapezoid above, if two in the opposite direction and the same size of the trapezoid, stacked together, is it possible to get a hexagon?

. pentagon {    position:relative;    width:60px;    border-bottom:60px solid yellowgreen;    border-left:40px solid transparent;    border-right:40px solid Transparent;}. Pentagon::before {    content: "";    Position:absolute;    width:60px;    height:0px;    top:60px;    Left: -40px;    border-top:60px solid yellowgreen;    border-left:40px solid transparent;    border-right:40px solid Transparent;}

Eight-side shape

Hexagon is solved, the octagonal shape is also a cinch, a rectangle plus two trapezoidal, you can synthesize a eight-side shape.

. octagon {    position:relative;    width:40px;    height:100px;    Background:yellowgreen;}. Octagon::before {    content: "";    height:60px;    Position:absolute;    top:0;    left:40px;    border-left:30px solid yellowgreen;    border-top:20px solid transparent;    border-bottom:20px solid Transparent;}. Octagon::after {    content: "";    height:60px;    Position:absolute;    top:0;    Left: -30px;    border-right:30px solid yellowgreen;    border-top:20px solid transparent;    border-bottom:20px solid Transparent;}

Pentagram

OK, explore the polygon, we continue to explore the X-Star.

First to see the pentagram, how to achieve it? Of course it's a direct call.--★☆

This is a joke, this is achieved using 3 triangular overlay rotations.

. Star {   margin:50px 0;   position:relative;   width:0;   border-right:100px solid transparent;   border-bottom:70px  solid yellowgreen;   border-left:100px solid transparent;   Transform:rotate (35deg) scale (. 6);}. Star:before {    content: ';    Position:absolute;    border-bottom:80px solid yellowgreen;    border-left:30px solid transparent;    border-right:30px solid transparent;    Top: -45px;    Left: -65px;    Transform:rotate ( -35deg);}. Star:after {    content: ';    Position:absolute;    top:3px;    Left: -105px;    border-right:100px solid transparent;    border-bottom:70px solid yellowgreen;    border-left:100px solid transparent;    Transform:rotate ( -70deg);}

Six-point Star

What about the six-point star? Imagine an upward triangle ▲, superimposed on a downward triangle, you can get a hexagon:

. sixstar {    position:relative;    width:0;border-left:50px Solid transparent;border-right:50px Solid transparent;border-bottom:100px solid Yellowgreen ;}. Sixstar:after {    content: "";    position:absolute;border-left:50px Solid transparent;border-right:50px Solid transparent;border-top:100px Solid Yellowgreen;top:30px;left: -50px;}

Octagonal star

What about the octagonal star? Eight horns so much. In fact, it is possible to use two rectangles to rotate the stitching.

. eightstar {    position:relative;    width:100px;    height:100px;    Background-color:yellowgreen;    Transform:rotate (30deg);}. Eightstar::before {    content: "";    Position:absolute;    top:0;    left:0;    width:100px;    height:100px;    Transform:rotate (45deg);    Background-color:yellowgreen;}

12 Point Star

Good. The last multi-horned star comes with a 12-point star. On the basis of an octagonal star, add a rectangle and you will get 12 corners. That is, the first pseudo-element is to be over.

. twelvestar {    position:relative;    width:100px;    height:100px;    Margin-bottom:100px!important;    Background-color:yellowgreen;    Transform:rotate (30deg);}. Twelvestar::before {    content: "";    Position:absolute;    top:0;    left:0;    width:100px;    height:100px;    Transform:rotate (30deg);    Background-color:yellowgreen;}. Twelvestar::after {    content: "";    Position:absolute;    top:0;    left:0;    width:100px;    height:100px;    Transform:rotate (60deg);    Background-color:yellowgreen;}

Elliptic

Finally, to use the traditional method to draw an ellipse, the past CSS3 to draw an ellipse, basically can only be achieved with the help of border.

Here, use border to draw the shape of an egg:

. ellipse {   width:120px;   height:160px;   Background-color:yellowgreen;   border-radius:50% 50% 50% 50%/60% 60% 40% 40%;}

Codepen--CSS Shapes (CSS geometry)

If you see this, congratulations, the text of this article starts here.

The above is about drawing geometry using traditional CSS3, and then we'll look at some of the more advanced ways to draw the geometry.

Clip-path

CSS new properties clip-path , meaning clipping path, so that we can easily generate a variety of geometry.

Clip-path implements the graphics that we want by defining special paths. This is the path in SVG.

Take a look at its API:

{/* Keyword values */clip-path:none;/* Image values */Clip-path:url (RESOURCES.SVG#C1);/* Box Valuesclip-path:fill-box; Clip-path:stroke-box;clip-path:view-box;clip-path:margin-boxclip-path:border-boxclip-path:padding-boxclip-path : content-box/* Geometry values */clip-path:inset (100px 50px), clip-path:circle (50px at 0 100px), Clip-path:polygon (50% 0 %, 100% 50%, 50% 100%, 0% 50%);/* Box and Geometry values combined */clip-path:padding-box circle (50px at 0 100px);/* Glo Bal values */clip-path:inherit;clip-path:initial;clip-path:unset;}

Looks a lot, actually very good understanding, if touches the SVG path, actually is copies the SVG path the definition. In other words, if you have not contacted SVG, after reading this article to learn the SVG path, it will be very easy to get started.

Depending on the syntax, we can generate different graphs.

For example clip-path: circle(50px at 50px 50px) , at the element's (50px, 50px), the crop produces a circle with a radius of 50px.

Start with the upper-left corner of the element as the coordinate

The entire clip-path attribute, the most important polygon , can be used to polygon generate freeform polygons.

Clip-path Example

The following are examples of using Clip-path to generate a circle and a ten-edged shape.

/* Round */.circle {  width:100px;  height:100px;  Background-color:yellowgreen;   Clip-path:circle (50px at 50px 50px);} /* 10-side */.polygon {  width:100px;  height:100px;  Background-color:yellowgreen;   Clip-path:polygon (50% 0%, 80% 10%, 100% 35%, 100% 70%, 80% 90%, 50% 100%, 20% 90%, 0% 70%, 0% 35%, 20% 10%);}

clip-path: circle(50px at 50px 50px)As mentioned above, it means that at the element's (50px, 50px), clipping produces a circle with a radius of 50px.

In the clip-path: polygon(50% 0%, 80% 10%, 100% 35%, 100% 70%, 80% 90%, 50% 100%, 20% 90%, 0% 70%, 0% 35%, 20% 10%) , 10 coordinate points are listed in turn. Our graph is to connect the 10 coordinate points in turn to form a cropped shape.

Of course, a percentage is used here, and a specific value can be used.

Clip-path Animation

Clip-path Another powerful thing is that you can make CSS transtion and CSS animation, which is transitions and animations.

See transition transitions for a polygon animation.

Codepen Demo--Clip-path Polygon transition Animation

Graphics Transform animations

In addition, we can also try to, a complete graph, split into a number of small graphics, which is also clip-path the charm of the Pure CSS graphics transformation:

Codepen Demo--Clip-path Triangle2rect

Limitations of Clip-path Animations

Clip-path animation Although beautiful, but there are some limitations, that is the transition of the two States, the number of coordinate vertices must be consistent.

That is, if I want to transition from a triangle to a rectangle. Assume that the triangles and rectangles are clip-path respectively:

• Triangle:clip-path: polygon(50% 0, 0 100%, 100% 0)
• Rectangular:clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%)

When animating transitions, it is not possible to do polygon(50% 0, 0 100%, 100% 0) polygon(0 0, 100% 0, 100% 100%, 0 100%) so directly, because it is transformed from 3 coordinate points to 4 coordinate points.

So here is the need for a flattering method, in the representation of the triangle, using four coordinate points, where two coordinate points are coincident. That is

• Triangle: clip-path: polygon(50% 0, 0 100%, 100% 0)clip-path: polygon(50% 0, 50% 0, 0 100%, 100% 0)

N-Side transition animations

If the brain hole is large enough, randomly generate N (n>=1000) edge shape, the transformation, what will be the effect?

See one see:

Codepen Demo-2000-Side transition animation

The transformation of the moment is very explosive feeling. But here's a big problem, just randomly generating 2000 coordinate points, and then using clip-path these coordinate points to connect them, not conforming to the required polygons.

In the Vue official website, there is an example of a regular polygon with a constant transition animation, very cool:

The Vue website uses the SVG implementation, here I slightly changed the next, using CSS clip-path implementation:

Codepen Demo--Clip-path N Polygon, interested to see.

Shape-outside

Finally shape-outside , another interesting property that has the ability to generate geometry.

shape-outsideWhat's that? It also has the ability to make a variety of geometries, but it can only be used with floats float .

Although the use of the restrictions, but it gives us a more free graphics and text mix ability.

First look at its API, it looks very complex:

{/    * Keyword values */    shape-outside:none;    Shape-outside:margin-box;    Shape-outside:content-box;    Shape-outside:border-box;    Shape-outside:padding-box;        /* Function values *    /shape-outside:circle ();    Shape-outside:ellipse ();    Shape-outside:inset (10px 10px 10px 10px);    Shape-outside:polygon (10px 10px, 20px 20px, 30px 30px);        /* <url> value *    /Shape-outside:url (image.png);        /* Gradient value *    /shape-outside:linear-gradient (45deg, Rgba (255, 255, 255, 0) 150px, red 150px);        /* Global values */    shape-outside:initial;    Shape-outside:inherit;    Shape-outside:unset;}

But, in fact, it is clip-path very similar to the syntax, it is easy to comprehend by analogy. See examples for easier understanding:

Let's familiarize ourselves with the API, and then assume that we have the following structure in existence:

<div class= "Container" >    <div class= "Shape-outside" >          </div >    xxxxxxxxxxx, text description,xxxxxxxxx</div> defined as follows css:.shape-outside {    width:160px;    height:160px;    Shape-outside:circle (80px at 80px 80px);    Float:left;}

Note that .shape-outside floating is used above and defined shape-outside: circle(80px at 80px 80px) to represent a circle of 80px radii at the (80px, 80px) coordinates of the element.

This will result in a mix of graphics and text:

Codepen Demo--Graphic mixed shape-outside

Well? Looks like nothing great? Isn't that float the effect?

No, no, look float and add shape-outside after the contrast:

Do you see the difference? Used shape-outside , the real implementation of the text is based on the outline of the shape, arranged around it.

is to use the Developer tool to select the function shape-outside of the elements, you can see, using a special blue to mark the contours of the geometry. Outside of this blue area, the text will be arranged.

shape-outsideThe essence

Focus, focus, focus.

So, shape-outside the essence is actually to generate the geometry, and cut out the surrounding area outside its geometry, so that the text can be arranged within these cropped areas.

So, after understanding the nature, let's look at some of the more complex picture-and-text mixes.

Parallelogram

Codepen Demo--Graphic mixed shape-outside

Heart shape, Diamond

Codepen Demo--Graphic mixed shape-outside

Compatibility of Clip-path with Shape-outside

Well, it's a pity that the compatibility of these two properties is still in a rather awkward position. Interested can look at the caniuse. Fully compatible use still requires effort.

So the demo shown in this article is -webkit- done under the kernel browser.

At last

Series of CSS articles summarized on my Github.

To this end of this article, if there are any questions or suggestions, you can communicate a lot, original articles, writing limited, Caishuxueqian, if there is not in the text, million hope to inform.

Wonderful CSS Shapes (CSS graphics)