CSS3: Draw irregular ICON_html/css_WEB-ITnose elegantly

When I saw the summary of China’s second CSS Conf on w3ctech in the morning, I was really happy;

Since I watched the video of the first CSS Conf on MOOC last year After that, everyone was shocked. It turned out that there was a conference dedicated to discussing CSS, and the CSS knowledge shared was really eye-opening;

The first blog post I wrote in the blog park "Layout" "Artifact Flexbox" was inspired by the first CSS Conf;

Therefore, we have formed an indissoluble bond; now when I see the videos and PPT shared at the second CSS Conf, although I have just seen "Re- The fun of picking up css (Part 1)" This part of the content is very inspiring

The topic of today's article is to use css3 to implement the following sharing icon:

Because I have used CSS3 to handle similar scenes many times before:

So, the outer frame part was quickly implemented smoothly:

Implementation code

	<!--分享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 分享按钮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 when it comes to realizing the irregular "eagle's beak", there is no way to start, because I have never used CSS to process similar irregular graphics before;

In "Recover "The Fun of CSS (Part 1)", the author clearly gives the idea of ​​​​implementing the "eagle beak":

Here is one The block element has a border and rounded corners, and its two borders will be connected by an arc:

First of all, the first truth, the border circle The angle can specify two radius values ​​(r1 and r2 in the figure below):

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

We find the circle connecting the two borders The arc will become a 1/4 elliptical arc. This truth solves our problem with scale. Next, we need to address the shape.

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

If we gradually reduce the value of w4 to zero, we will get this shape:

The above Quoted from: https://github.com/cssmagic/blog/issues/52

Author: cssmagic

　

I practiced by myself and made some mistakes at the beginning, but the results of these mistakes were very interesting:

For example, this:

	      .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;			}	

Final effect:

Online demo

.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;}

Quoting a passage from cssmagic as the end of this article:

In fact, in recent years, a lot of good things have appeared in the CSS field:

How did I feel when I heard about them, understood them, and used them??

The little boy on the right is me. My mood is excitement, novelty, and excitement.