css下三角形代码如何写

如何在CSS中绘制三角形？

CSS中我们可以通过四个边框的设置来绘制三角形，使其中三个边框透明为0

		.triangle {
		    width: 0;
		    height: 0;
		    border-style: solid;
		    border-width: 0 50px 50px 50px;
		    border-color: transparent transparent #007bff transparent;
		}
		

上述代码中，width和height设为0，因为三角形的大小是由border-width控制的，所以这里的width和height只用来占位符。　

　border-style属性将边框渲染为实线的样式, 使用solid渲染, 绘制三角形时, 边框只需要有三条。border-width属性表示边框的大小，四个值分别表示top、right、bottom、left。其中left和right的值设置成border-width的一半的原因是我们要绘制的是等边三角形，所以要让三个边框的长度相等。border-color属性设置边框颜色，其中transparent表示透明，如果不设置则会出现默认黑色边框，这里三角形下边框的颜色为蓝色 #007bff。　

如何在CSS中绘制向上、向下、向左、向右的三角形？

上述代码只绘制了向下的三角形，如果需要绘制其他方向的三角形，需要改变其中三个边的设置

		.triangle-up {
		    width: 0;
		    height: 0;
		    border-style: solid;
		    border-width: 50px 50px 0 50px;
		    border-color: #007bff transparent transparent transparent;
		}
		.triangle-right {
		    width: 0;
		    height: 0;
		    border-style: solid;
		    border-width: 50px 0 50px 50px;
		    border-color: transparent transparent transparent #007bff;
		} 
        .triangle-left {
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 50px 50px 50px 0;
            border-color: transparent #007bff transparent transparent;
        }
		

　如上述样例代码所示，只需要把初始CSS样式中的透明与不透明的位置调换一下便能绘制其他方向的三角形

有没有更简单的方法绘制三角形？

通过使用transform属性，我们也能简单绘制出三角形

		.triangle-simple {
		    width: 0; 
		    height: 0; 
		    border-left: 30px solid transparent;
		    border-right: 30px solid transparent;
		
		    border-bottom: 30px solid #007bff;
		    transform: rotate(45deg);
		    margin: 20px;
		}
		

对于上述代码中的border-left、border-right属性，我们设置宽度为0，实际上只是用来占位符；transform属性引入旋转角度，设为45度，transform既可以旋转，也可缩放，亦可改变形状。

CSS绘制三角形的注意事项

CSS绘制三角形虽然比较简单，但还是有一些需要注意的事项：

• 三角形的绘制要以中心为点
• 绘制三角形后，其它周围元素（如文字）如果与三角形相应区域重合，可能会被挡住
• transform属性可以变换三角的大小和角度，但这样做会破坏页面的布局，因此在使用时需要考虑到这一点。
• 在绘制时，尽量不要使用负数，因为负数会降低性能，增加代码的复杂度。