CSS设置三角形
程序员文章站
2022-05-06 09:13:55
...
通过设置边框来实现三角形。如下图：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>小三角</title>
<style>
.demo:after {
content: '';
display: inline-block;
width: 0;
height: 0;
border-top: 50px solid red;
border-right: 50px solid green;
border-bottom: 50px solid blue;
border-left: 50px solid yellow;
position: relative;
top: 0px;
left: 30px;
}
.top:after {
content: '';
width: 0px;
height: 0px;
display: inline-block;
border-top: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 50px solid blue;
border-left: 50px solid transparent;
position: relative;
top: 10px;
left: 30px;
}
.right:after {
content: '';
width: 0px;
height: 0px;
display: inline-block;
border-top: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 50px solid transparent;
border-left: 50px solid yellow;
position: relative;
top: 40px;
left: 30px;
}
.bottom:after {
content: '';
width: 0px;
height: 0px;
display: inline-block;
border-top: 50px solid red;
border-right: 50px solid transparent;
border-bottom: 50px solid transparent;
border-left: 50px solid transparent;
position: relative;
top: 80px;
left: 30px;
}
.left:after {
content: '';
width: 0px;
height: 0px;
display: inline-block;
border-top: 50px solid transparent;
border-right: 50px solid green;
border-bottom: 50px solid transparent;
border-left: 50px solid transparent;
position: relative;
top: 50px;
left: 0px;
}
</style>
</head>
<body>
<div class="demo">这是一整个边框</div>
<div class="top">这是一个向上的边框三角形</div>
<div class="right">这是一个向右的边框三角形</div>
<div class="bottom">这是一个向下的边框三角形</div>
<div class="left">这是一个向左的边框三角形</div>
<div>
<h2>部分css说明：</h2>
<h3>content: '';<span>内容为空</span></h3>
<h3>border-top: 50px solid transparent;<span>设置上边框为透明，其他的同理</span></h3>
</div>
</body>
</html>
上一篇： 弹出层