1.加了宽高和border，边用不同颜色显示，每条边都是一个梯形
2.去掉宽高，每条边都是三角形
3.只显示其中一条边就是不同的三角形了,是不是很简单，改变border四条边宽度试试吧~
上述代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css3—三角形</title>
</head>
<style>
.dib{display: inline-block;}
.triangle0{
width:40px;
height:40px;
border-top:40px solid yellow;
border-right:40px solid black;
border-bottom:40px solid pink;
border-left:40px solid red;
}
.triangle1{
width:0px;
height:0px;
border-top:40px solid yellow;
border-right:40px solid black;
border-bottom:40px solid pink;
border-left:40px solid red;
}
.trianglet{
width:0;
height:0;
border-top:40px solid yellow;
border-right:40px solid transparent;
border-left:40px solid transparent;
border-bottom:40px solid transparent;
}
.triangler{
width:0;
height:0;
border-top:40px solid transparent;
border-right:40px solid black;
border-bottom:40px solid transparent;
border-left:40px solid transparent;
}
.triangleb{
width:0;
height:0;
border-top:40px solid transparent;
border-right:40px solid transparent;
border-bottom:40px solid pink;
border-left:40px solid transparent;
}
.trianglel{
width:0;
height:0;
border-top:40px solid transparent;
border-right:40px solid transparent;
border-bottom:40px solid transparent;
border-left:40px solid red;
}
</style>
<body>
<div class="triangle0 dib"></div>
<div class="triangle1 dib"></div>
<div class="trianglet dib"></div>
<div class="triangler dib"></div>
<div class="triangleb dib"></div>
<div class="trianglel dib"></div>
</body>
</html>
希望读到这里对您有所帮助，错误请指正，文章不定期更改或更新，转载请注明出处，方便溯源。
时间： 2024-12-07 18:39:07