CSS3: elegantly draw irregular icons

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.