CSS怎么绘制三角形和箭头
本篇内容主要讲解“CSS怎么绘制三角形和箭头”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“CSS怎么绘制三角形和箭头”吧!
成都创新互联公司专注于万安网站建设服务及定制,我们拥有丰富的企业做网站经验。 热诚为您提供万安营销型网站建设,万安网站制作、万安网页设计、万安网站官网定制、成都小程序开发服务,打造万安网络公司原创品牌,更为您提供万安网站排名全网营销落地服务。
先来看看这段代码:
/**css*/ .d1{ width: 0; height: 0; border: 100px solid #339933; } /**html*/ /**css*/ .d2{ width: 0; height: 0; border-width: 100px; border-style: solid; border-color:#FFCCCC #0099CC #996699 #339933; } /**html*/
看了这两段代码,和效果图,是不是有一点眉目了?原来画三角形,只需要用元素的`border`来控制就可以了,`border-with`控制大小, `border-style`控制样式(实线、虚线等), `border-color`控制颜色,分上、右、下、左
三角形示例
向下三角形
/**css*/ .d3{ margin-left: 10px; float: left; width: 0; height: 0; border-width: 100px; border-style: solid; border-color:#FFCCCC transparent transparent transparent; } /**html*/
向左三角形
/**css*/ .d4{ margin-left: 110px; float: left; width: 0; height: 0; border-width: 100px; border-style: solid; border-color: transparent #0099CC transparent transparent; } /**html*/
这里的`transparent`是透明的意思
接下来两种就留给聪明的你了,相信你可以的,动手才知道原来这么简单!
其实我们还可以通过,一种样式,来实现不能角度的三角形,那就是利用CSS3里面的旋转`transform:rotate(90deg)`。
/**css*/ .d4{ margin-left: 110px; float: left; width: 0; height: 0; border-width: 100px; border-style: solid; border-color: transparent #0099CC transparent transparent; transform: rotate(90deg); /*顺时针旋转90°*/ } /**html*/
箭头示例
向左箭头
/**css*/ .left{ position: absolute; } .left:before,.left:after{ position: absolute; content: ''; border-top: 10px transparent dashed; border-left: 10px transparent dashed; border-bottom: 10px transparent dashed; border-right: 10px #fff solid; } .left:before{ border-right: 10px #0099CC solid; } .left:after{ left: 1px; /*覆盖并错开1px*/ border-right: 10px #fff solid; } /**html*/
CSS绘制三角形和箭头,不用再用图片了
是不是发现箭头和三角形是一样的呢?发现了,说明你已经懂了,箭头其实就是2个三角形,然后用白色三角形覆盖蓝色三角形,并且错开1px,刚刚好就形成了箭头。这就和《最强大脑》层叠消融项目是一样的。
向上箭头
/**css*/ .top{ position: absolute; } .top:before,.top:after{ position: absolute; content: ''; border-top: 10px transparent dashed; border-left: 10px transparent dashed; border-right: 10px transparent dashed; border-bottom: 10px #fff solid; } .top:before{ border-bottom: 10px #0099CC solid; } .top:after{ top: 1px; /*覆盖并错开1px*/ border-bottom: 10px #fff solid; } /**html*/
通过上面两个例子,我想剩余两个方向的箭头,你应该可以搞定了,就是不能,那就会一种就好了,然后通过`transform:rotate(90deg)`,来旋转角度,还是能搞定各个方向的箭头。
到此,相信大家对“CSS怎么绘制三角形和箭头”有了更深的了解,不妨来实际操作一番吧!这里是创新互联网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!
本文名称:CSS怎么绘制三角形和箭头
分享网址:http://azwzsj.com/article/ghsjic.html