css绘制三角形的方法:首先需要创建一个div元素,设置div的宽高(width/height)为0,只用边框的宽来填充,边框的样式为实线 “solid”;
话不多说,直接上代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<style>
.box {
width: 0;
height: 0;
border: 50px solid;
border-top-color: lightcoral;
border-left-color: lightblue;
border-right-color: lightgreen;
border-bottom-color: lightpink;
}
</style>
<body>
<div class="box"></div>
</body>
</html>
效果演示:
如果只想要一个三角形,那么就将其他三边的border设置为透明(transparent)
例如:想要一个朝上的三角形,那么除了底部的border,其余都为透明
代码:
.box {
width: 0;
height: 0;
border: 50px solid;
border-color: transparent;
border-bottom-color: lightpink;
}
效果:
想要其他的三角形也是一样的操作,这里就不进行演示了。
来日方长,何惧车遥马慢!