CSS3:优雅地绘制不规则ICON

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

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

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

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

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

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

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

实现代码

	<!--分享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;
	}

但在实现不规则的"鹰嘴"时,便无从下手,因为之前从来用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 领域出现了很多好东西:

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

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

时间: 2024-09-30 21:39:55

CSS3:优雅地绘制不规则ICON的相关文章

[转]更优雅地绘制阴影

Box-shadow虽然是一个css3的属性,但由于浏览器支持不错,且用它来营造一种立体感.层次感着实方便,这让它成为了互联网上随处可见的css3特效.不过我感觉想写好阴影不是一件容易的事情.至少我常常摸索半天,写出来的阴影却总让人很难受. 上周在知乎上看到了一个问答,很受启发:如何理解 Material Design 中卡片的两层阴影,于是特意去看了Meterial Design的设计准则(中文翻译),觉得其中的一些设计思想和细节追求很值得我们去借签. 本文标题是“更优雅地绘制阴影”,但其实我

css3之图形绘制

由于近期的项目中出现了不规则的边框和图形, 所以重新温习一下CSS3的图形绘制...样式绘制的图形比图片的性能要好,体验更佳,关键一点是更加有趣! 以下几个例子主要是运用了css3中border.bordr-radius.transform.伪元素等属性来完成的,我们先了解下它们的基本原理. border:简单的来说border语法主要包含(border-width.border-style.border-color)三个属性. ? border-top(上边框):border-width bo

css3实现的绘制图形图案效果代码实例

css3实现的绘制图形图案效果代码实例:如果使用css2实现绘制图形图案几乎是不可能的,或者说费好大的劲也只能够得到非常简单的图案,css3的出现将绘制复杂的图形这个目标成为可能,下面就是一个相关的代码实例,有这方面需要的朋友可以参考一下它的实现方式.代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" co

【CSS3动画实战】Mailman Icon

周末闲来无事,就想着做点东西练练手.又苦于自己 PS 水平太差,设计不出什么好看的东西. 干脆就在 Dribbble 上逛一逛,看看有什么看起来比较屌的,实际上却很简单的东西. 一共做了 3 个,均已上传到 Github,欢迎交流和学习. https://github.com/weilao/Mailman-Icon https://github.com/weilao/Moon-Graphic https://github.com/weilao/Sometime-Welcome 当然,为了今天的内

CSS3属性border-radius绘制多种多样的图形

border-radius,国内翻译成圆角,你可能以为这个属性就是用来画圆角,没错,但是除此之外,它还可以做点别的事情.radius其实指的是边框所在圆的半径,这个CSS3属性不仅能够创建圆角,还可以创建椭圆角(如图下图第7),把这些角按照不同的顺序和大小来展现,能够绘制成多种多样的图形.以下图例就是通过定义border-radius得到的效果. 把这些基本的图形进行组合,还可以描绘成不同的图案,真的很棒.以下只是简单的几个举例,更多的图形,自己动手画吧.仅border-radius就能实现这么

WPF 如何绘制不规则按钮,并且有效点击范围也是不规则的

最近在做一个东西,如地图,点击地图上的某一区域,这一区域需要填充成其他颜色.区域是不规则的,而且点击该区域的任一点,都能够变色.普通的按钮只是简单的加载一幅图肯定是不行的.查了很多资料,终于把它搞定了.实现方法不是原创,也是参照了网上的实现. 具体的思想:就是根据图片文件来画这个按钮,画出的按钮,形状正好是该图片的样子. 这里的图片是有要求的,背景必须是透明的PNG图片,而且该图片必须是建立了路径的. 样式实现: <Style x:Key="ButtonStyle_Custom"

Cocos2dx3.2 Crazy Tetris 绘制不规则方块 遮罩(ClippingNode的使用)

前面已经思考了可能遇到的消除和面积判定问题,那么接下来的问题就是如何显示这些由于消除可能引出的不规则图形. 在这里,我使用了ClippingNode(遮罩).关于ClippingNode网上的介绍都非常仔细,因此我在这里只是简单的说一下: 正如他的名字一样,他本身也是一个节点,因此可以参考我的最开始的一篇关于节点树的博文,使用他时,需要将其添加到另外一个节点中. 使用时需要注意的是要向其中添加模板(stencil)和底板.Stencil的意思就是类似模具一样的东西,可以想象,如果我们将模具的形状

CSS3新特性,绘制常见图形

前言:最近准备做一个自己的网页,设计稿中导航我准备设计成矩形,也有hover样式展示的矩形,当中一些头像等等.以前除了画圆,好像真没认真画过其他图形,今天就画画我们常见到的几个图形. 在此之前我们有必要了解下什么是伪元素(和它不同的,还有一个概念叫伪类,两者容易混淆),没有它画不成图形的. a)伪元素:用来在内容元素的前后插入额外的元素,之所以叫伪元素,就是它们根本就不在文档中生成,只能在外部可见,比如:你F12时,在右边代码框中是不是可以看到? 这里用到的两个伪元素  ①元素之前:before

石头教你如何用纯CSS3绘制三角形、箭头。

经常在有些网站上看到一些三角图形,但通常这些都是图片,现在石头就教你如何用纯css3技术来绘制三角图形. 下面是具体步骤,把这些看一遍你也就懂得怎样来绘制三角形.箭头了. 1.新建一个元素,随便什么元素,不过我习惯性的会用块元素来做.如果行内元素就display:block它. <div class="box"></div> 2.把它的宽高设置为height:0px; width:0px; 3.设置边框border属性,用来实现三角形. 首先要了解border具