当前位置:Gxlcms > html代码 > CSS3:优雅地绘制不规则ICON_html/css_WEB-ITnose

CSS3:优雅地绘制不规则ICON_html/css_WEB-ITnose

时间:2021-07-01 10:21:17 帮助过:4人阅读

早上在w3ctech上看到 中国第二届CSS Conf总结 的时候,真是开心极了;

自从去年在慕课网上看了第一届CSS conf 视频之后,整个人都震惊了,原来还有大会是专门用来讨论CSS的,而且分享的CSS知识真是让人眼界大开;

我在博客园写的第一篇博文《布局神器Flexbox》便是受到第一届CSS Conf的启发;

所以,算是结下了不解之缘;如今看到第二届分享的视频和PPT时,虽然才看到 《重拾 css 的乐趣(上)》 这一部分内容,但却很受启发

今天文章的主题是用css3实现下面这个分享图标:

因为之前用css3多次处理过类似场景:

所以,外框部分很快就顺利实现:

实现代码

		

	/**	 *@ 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;	}

但在实现不规则的"鹰嘴"时,便无从下手,因为之前从来用CSS处理过类似不规则图形;

在《重拾 css 的乐趣(上)》中,作者清晰地给出了实现“鹰嘴”的思路:

这里有一个块元素,设置了边框和圆角,它的两条边框会通过一段圆弧连接起来:

首先,第一个真相,边框圆角可以指定两个半径值(下图中的 r1 和 r2):

如果这两个半径值相等,则连接两条边框的圆弧就是一条相标准的 1/4 圆弧。如果不相等(比如我们把 r2减小),会得到这样的效果:

我们发现连接两条边框的圆弧会变成一道 1/4 椭圆弧。这个真相解决了我们在尺度上的问题。接下来,我们需要解决形状上的问题。

第二个真相,不同方向上的边框的厚度(下图中的 w1 和 w4)也是可以不一样的:

如果我们逐渐减小 w4 的值至零,我们会得到这个形状:

以上内容引用自:https://github.com/cssmagic/blog/issues/52

作者:cssmagic

 

自己动手实践,一开始犯了一些错误,不过这些错误导致的结果却很有趣:

比如这个:

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

最终效果:

在线演示

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

引用 cssmagic 的一段话作为本文的结束:

其实,最近这几年,在 CSS 领域出现了很多好东西:

当我听说它们、了解它们、使用它们的时候,我的心情是这样的??

右边的这个小男孩就是我。我的心情是激动、新奇、兴奋。

人气教程排行