CSS绘制三角形和箭头，不用再用图片了 |
您所在的位置：网站首页 › 往下看的箭头图 › CSS绘制三角形和箭头，不用再用图片了 |
CSS绘制三角形和箭头，不用再用图片了
|
「这是我参与2022首次更文挑战的第3天，活动详情查看：2022首次更文挑战」 前言还在用图片制作箭头，三角形，那就太lou了。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*/这里的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*/是不是发现箭头和三角形是一样的呢？发现了，说明你已经懂了，箭头其实就是2个三角形，然后用白色三角形覆盖蓝色三角形，并且错开1px，刚刚好就形成了箭头。这就和《最强大脑》层叠消融项目是一样的。 向上箭头 /**css*/ .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)，来旋转角度，还是能搞定各个方向的箭头。 |
【本文地址】