CSS3: elegantly draw irregular icons

I saw it on the W3ctech in the morning when China's second CSS Conf summed up, , it was very happy;

Since last year in the Mu class online watching the first CSS conf video, the whole people are shocked, the original and the General Assembly is devoted to the discussion of CSS, and the sharing of CSS knowledge really let my eyes open;

I wrote in the blog Park, the first blog post "layout artifact Flexbox" is inspired by the first CSS conf;

So, it is a indissoluble bond, and now see the second share of the video and PPT, although only to see the fun of the "re-css (on)" This part of the content, but very inspired by

The theme of today's article is to use CSS3 to achieve the following sharing icon:

Because a similar scenario has been processed many times before with CSS3:

As a result, the outer frame section is quickly implemented:

Implementation code

<!--share Icon--><div class= "icon" ><i class= "short top-short" ></i><i class= "short Right-short "></i><i class=" Icon-triangle "></i><i class=" irregular "></i></div >

/** *@ CSS3 Share button icon *@ author:kevin *@ 2015/8/15 *    . icon{position:relative    ;    width:180px;    height:180px;    margin:300px Auto;    border-bottom:20px solid #333;    border-left:20px solid #333;}. short{    Position:absolute;    width:50px;    height:20px;    Background-color: #333;}. top-short{    top:0;    left:0;}. right-short{right    : -15px;    bottom:0;    Transform:rotate (90deg);}. top-short:after{    Position:absolute;    Right: -20px;    Display:block;    Content: ";    border-width:0 0 20px 20px;    Border-style:solid;    Border-color:transparent transparent transparent #333;}. right-short:after{    Position:absolute;    Left: -20px;    Display:block;    Content: ";    border-width:20px 0 0 20px;    Border-style:solid;    Border-color: #333 transparent transparent transparent;}

But in the implementation of the irregular "eagle mouth", will not be the first, because before the CSS has been used to deal with similar irregular graphics;

In the fun of regaining CSS (on), the author clearly gives the idea of "Eagle's Mouth":

There is a block element with a border and rounded corners, and its two borders are connected by an arc:

First, the first truth, the border fillet can specify two radius values (in r1 and r2 ):

If the two radius values are equal, the arc connecting the two borders is a standard 1/4 arc. If they are not equal (for example r2 , we reduce them), we get this effect:

We found that arcs that connect two borders turn into a 1/4 elliptical arc. This truth solves our problem on the scale. Next, we need to solve the problem on the shape.

The second truth is that the thickness (and) of the borders in different directions w1 w4 can also vary:

If we gradually decrease w4 the value to 0, we will get this shape:

The above references are from: HTTPS://GITHUB.COM/CSSMAGIC/BLOG/ISSUES/52

Cssmagic

　

Do it yourself and make some mistakes at first, but the results of these errors are interesting:

For example, these two:

      . Irregular {width:100px;height:60px;position:absolute;top:0;right:0;bottom:0;left:0;margin:auto;transform: Rotate ( -15deg); Background-color: #333; border-radius:62px 0px;}

After several mistakes, you get the graphics you want:

. irregular{    Position:absolute;    top:22%;    right:0;    bottom:0;    left:0;    Display:inline-block;    width:120px;    Margin:auto;    border-top:40px solid #333;    border-left:0 solid #333;    border-radius:100px 0;}. irregular:after{    Position:absolute;    Top: -70px;    Right: -40px;    Display:block;    Content: ";    border-width:50px 0 50px 50px;    Border-style:solid;    Border-color:transparent transparent transparent #333;}

Quote Cssmagic A sentence as the end of this article:

In fact, in recent years, there have been many good things in the field of CSS:

When I hear about them, know them, use them, I feel the same way

This little boy on the right is me. My mood is excited, novelty, excitement.

CSS3: elegantly draw irregular icons