时间:2021-07-01 10:21:17 帮助过:76人阅读
下面是具体步骤,把这些看一遍你也就懂得怎样来绘制三角形、箭头了。
1、新建一个元素,随便什么元素,不过我习惯性的会用块元素来做。如果行内元素就display:block它。
绘制三角形
截图如下:
这就相当于分别把四个边框向正方形的中心拉伸。
上面的代码出现4个三角形合并成一个正方形。到这里就很清晰了,只要把想要的保留,其它的设置为透明就可以达到三角形的效果,
4,实例
分别绘制向下,向右,向左向上的三角形。
实现代码如下。
!DOCTYPE html>绘制三角形
截图如下:
从以上图形可以看出:
绘制向下的三角形箭头,就相当于将上边框向下拉伸。
border-top-color: #2DCB70;
绘制向上的三角形箭头,就相当于将下边框向上拉伸。
border-bottom-color: #333333;
绘制向左的三角形箭头,就相当于将右边框向左拉伸。
绘制向右的三角形箭头,就相当于将左边框向右拉伸。
看完上面的你也就学会用CSS绘制三角形箭头了。