css3三角形怎么做

在网页设计中，有时候需要使用三角形来作为图标或者装饰性的元素。那么在CSS3中，我们可以用什么方法来实现呢？下面就来介绍一下。

/*实现等边三角形*/
.triangle {
　　width: 0;
　　height: 0;
　　border-width: 30px;
　　border-style: solid;
　　border-color: #007bff transparent transparent transparent;
}

上面的代码使用了border来实现三角形，首先我们将宽度和高度都设为0，为了让三角形形成我们设置了一个等边三角形的基本样式，然后我们通过设置边框的宽度和颜色来形成边框的样式。其中，border-color属性的顺序为上、右、下、左（即top、right、bottom、left），注意这里只用设置上边框的颜色。

/*实现直角三角形*/
.rightangle {
　　height: 0;
　　width: 0;
　　border-top: 30px solid #007bff;
　　border-left: 20px solid transparent;
}

上面的代码则是实现一个直角三角形，同样地，我们将元素的宽度和高度设置为0，然后通过设置上边框和左边框的样式来形成三角形的样式。其中，border-top和border-left变量的值对应的是边框的宽度和颜色，border-left还需要设置为透明，使其形成直角三角形。

通过CSS3实现三角形，不仅可以方便地制作符合自己设计风格的图标和装饰元素，而且代码量相比图片实现要少，同时也减少了网站的请求响应速度。

查看更多关于css3三角形怎么做的详细内容...