效果图：
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>三角形</title>
<style>
#tri{
width: 0;
height: 0;
border-top: 0 solid transparent;
border-left: 10px solid transparent;
border-bottom: 20px solid red;
border-right: 10px solid transparent;
background-color: white;
}
</style>
</head>
<body>
<div id="tri"></div>
</body>
</html>
自己的理解（By8.13）：
三角形的尖朝向那边，那边的对面就设置颜色，这个颜色也就是三角形的颜色，其余三边不设置颜色。 说白了就是，宽高设为0，只设置边框，用边框去填充。 拿上边的三角形说吧，尖朝上，所以上边的border为0，没边框。 颜色也就是下边框填充的。三角形的颜色也就是下边框的颜色。如果想要设置三角形的大小，修改代码为：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>三角形</title>
<style>
#tri{
width: 0;
height: 0;
border-top: 0 solid transparent;
border-left: 20px solid transparent;
border-bottom: 20px solid red;
border-right: 20px solid transparent;
background-color: white;
/*三角形的尖朝向那边，那边的对面就设置颜色，这个颜色也是三角形的颜色，其余三边不设置颜色*/
}
</style>
</head>
<body>
<div id="tri"></div>
</body>
</html>
效果为：
只需设置需要加宽的方向的border-width即可。
代码再次修改为：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>三角形</title>
<style>
#tri{
width: 0;
height: 0;
border-top: 0 solid transparent;
border-left: 20px solid transparent;
border-bottom: 20px solid red;
border-right: 20px transparent;
background-color: white;
}
</style>
</head>
<body>
<div id="tri"></div>
</body>
</html>
看效果：
一个直角三角形就出来了，其他自己尝试了。
下面绘制空心三角形。（这个说白了也就用个背景颜色去挡住"空心"的地方）效果图：代码：
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>空心三角形</title>
<style>
.triangle{
width: 0;
height:0;
border-top: 0 solid transparent;
border-bottom: 30px solid blueviolet;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
position: relative;
}
.triangleInner{
width: 0;
height:0;
border-top: 0 solid transparent;
border-bottom: 28px solid white;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
position: absolute;
left: -8px;
top:2px;
}
</style>
</head>
<body>
<div class="triangle">
<div class="triangleInner"></div>
</div>
</body>
</html>
再次创新下代码为：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>空心三角形</title>
<style>
.triangle{
width: 0;
height:0;
border-top: 0 solid transparent;
border-bottom: 10px solid darkorange;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
position: relative;
top:1px;
left: 20px;
}
.triangleInner{
width: 0;
height:0;
border-top: 0 solid transparent;
border-bottom: 8px solid white;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
position: absolute;
left: -8px;
top:2px;
}
.block{
width: 200px;
height:100px;
border:1px solid darkorange;
text-align: center;
line-height: 100px;
border-radius: 10px;
}
</style>
</head>
<body>
<div class="triangle">
<div class="triangleInner"></div>
</div>
<div class="block">hello world</div>
</body>
</html>
效果图wei：
时间： 2024-11-08 19:10:13