CSS构造三角形
程序员文章站
2024-02-20 14:22:22
...
1. 我们用css 边框可以模拟三角效果
2. 宽度高度为0
3. 我们4个边框都要写， 只保留需要的边框颜色，其余的不能省略，都改为 transparent 透明就好了
4. 为了照顾兼容性 低版本的浏览器，加上 font-size: 0; line-height: 0;
效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>triangle</title>
<style>
/*1. 我们用css 边框可以模拟三角效果
2. 宽度高度为0
3. 我们4个边框都要写， 只保留需要的边框颜色，其余的不能省略，都改为 transparent 透明就好了
4. 为了照顾兼容性 低版本的浏览器，加上 font-size: 0; line-height: 0;*/
.ractangle {
width: 0px;
height: 0px;
font-size: 0px;
line-height: 0px;
margin:100px auto;
border-left: 100px solid red;
border-right: 100px solid green;
border-top: 100px solid yellow;
border-bottom: 100px solid #00a4ff;
}
.triangle {
width: 0px;
height: 0px;
font-size: 0px;
line-height: 0px;
margin:0px auto;
border-width: 100px;
border-style: solid;
border-color: #00a4ff transparent transparent transparent;
}
</style>
</head>
<body>
<div class="ractangle">
</div>
<div class="triangle">
</div>
</body>
</html>