石头教你如何用纯CSS3绘制三角形、箭头。_html/css_WEB-ITnose
程序员文章站
2022-05-30 20:21:32
...
经常在有些网站上看到一些三角图形,但通常这些都是图片,现在石头就教你如何用纯css3技术来绘制三角图形。
2、把它的宽高设置为height:0px; width:0px;
3、设置边框border属性,用来实现三角形。
首先要了解border具体是怎么样的,我写了一个这样的样式,具体代码如下:
下面是具体步骤,把这些看一遍你也就懂得怎样来绘制三角形、箭头了。
1、新建一个元素,随便什么元素,不过我习惯性的会用块元素来做。如果行内元素就display:block它。
2、把它的宽高设置为height:0px; width:0px;
3、设置边框border属性,用来实现三角形。
首先要了解border具体是怎么样的,我写了一个这样的样式,具体代码如下:
绘制三角形
截图如下:
这就相当于分别把四个边框向正方形的中心拉伸。
上面的代码出现4个三角形合并成一个正方形。到这里就很清晰了,只要把想要的保留,其它的设置为透明就可以达到三角形的效果,
4,实例
分别绘制向下,向右,向左向上的三角形。
实现代码如下。
!DOCTYPE html>绘制三角形
上一篇: 【找工作资料】中智谈英文简历写作技巧
下一篇: 关联子查询和嵌套子查询