方法1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<style>
.triangle {
width: 0;
height: 0;
border: 50px solid;
border-color: blue pink red yellow; /* 上右下左的顺序 */
}
</style>
<body>
<div class="triangle"></div>
</body>
</html>
方法2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<style>
.triangle2 {
width: 100px;
height: 100px;
background-color: blue;
clip-path: polygon(0% 0%, 100% 0%, 50% 50%);
/**
绘制多边形顶点
【0% 0%】左上角的点（水平方向0%，垂直方向0%）
【100% 0%】右上角的点（水平方向100%，垂直方向0%）
【50% 50%】中间角的点（水平方向50%，垂直方向50%）
*/
}
</style>
<body>
<div class="triangle2"></div>
</body>
</html>
方法3
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<svg width="100" height="100">
<!-- 绘制角的坐标（x,y） -->
<polygon points="0,0 100,0 50,50" fill="blue"></polygon>
<!-- 0,0 左上 100,0 右上 50,50 中间 -->
<polygon points="100,100 100,0 50,50" fill="pink"></polygon>
<polygon points="100,100 0,100 50,50" fill="red"></polygon>
<polygon points="0,0 0,100 50,50" fill="yellow"></polygon>
</svg>
</body>
</html>
如果文章有帮助到您 帮忙点赞~
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
