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

石头教你如何用纯CSS3绘制三角形、箭头。_html/css_WEB-ITnose

php中文网

发布： 2016-06-24 11:52:18

原创

2241人浏览过

经常在有些网站上看到一些三角图形，但通常这些都是图片，现在石头就教你如何用纯css3技术来绘制三角图形。

下面是具体步骤，把这些看一遍你也就懂得怎样来绘制三角形、箭头了。

1、新建一个元素，随便什么元素，不过我习惯性的会用块元素来做。如果行内元素就display:block它。

2、把它的宽高设置为height:0px; width:0px;

3、设置边框border属性，用来实现三角形。

首先要了解border具体是怎么样的，我写了一个这样的样式，具体代码如下：

<!DOCTYPE html><html><head>    <meta charset="utf-8">    <title>绘制三角形</title>    <style>        .box{            margin: 20px auto;//设置图形居中            width: 0px;            height: 0px;            border: 50px solid transparent;            border-top-color: #2DCB70;            border-right-color:gold;            border-bottom-color: #333333;            border-left-color: red;        }    </style></head><body><div class="box"></div><div class="box1"></div><div class="box2"></div><div class="box3"></div><div class="box4"></div></body></html>

登录后复制

立即学习“前端免费学习笔记（深入）”；

截图如下：

微撰

AI智能写作平台

207

查看详情

立即学习“前端免费学习笔记（深入）”；

这就相当于分别把四个边框向正方形的中心拉伸。

立即学习“前端免费学习笔记（深入）”；

上面的代码出现4个三角形合并成一个正方形。到这里就很清晰了，只要把想要的保留，其它的设置为透明就可以达到三角形的效果，

立即学习“前端免费学习笔记（深入）”；

4，实例

分别绘制向下，向右，向左向上的三角形。

实现代码如下。

立即学习“前端免费学习笔记（深入）”；

!DOCTYPE html><html><head>    <meta charset="utf-8">    <title>绘制三角形</title>    <style>        .box{            margin: 20px auto;            width: 0px;            height: 0px;            border: 50px solid transparent;            border-top-color: #2DCB70;            border-right-color:gold;            border-bottom-color: #333333;            border-left-color: red;        }        .box1{            margin: 5px auto;            width: 0px;            height: 0px;            border: 50px solid transparent;            border-top-color: #2DCB70;        }        .box2{            margin: 5px auto;            width: 0px;            height: 0px;            border: 50px solid transparent;            border-left-color: red;        }        .box3{            margin: 5px auto;            width: 0px;            height: 0px;            border: 50px solid transparent;            border-right-color:gold;      <span style="white-space:pre">	</span>}

登录后复制

        .box4{            margin: 0 auto;            width: 0px;            height: 0px;            border: 50px solid transparent;            border-bottom-color: #333333;        }    </style></head><body><div class="box"></div><div class="box1"></div><div class="box2"></div><div class="box3"></div><div class="box4"></div></body></html>

登录后复制

截图如下：

立即学习“前端免费学习笔记（深入）”；

从以上图形可以看出：

绘制向下的三角形箭头，就相当于将上边框向下拉伸。

border-top-color: #2DCB70;

立即学习“前端免费学习笔记（深入）”；

绘制向上的三角形箭头，就相当于将下边框向上拉伸。

border-bottom-color: #333333;

立即学习“前端免费学习笔记（深入）”；

绘制向左的三角形箭头，就相当于将右边框向左拉伸。

绘制向右的三角形箭头，就相当于将左边框向右拉伸。