倒三角的做法其实很简单,一个长宽都为0的框,它的四边其实是四个三角形。它有4条边,从左至右分别为left 、 top 、 right 、 bottom,设置宽高为0,border:50px,然后分别设置每条边的颜色,即可得到下面的四边形。然后设置 left 、right 、bottom的背景色为透明(transparent),即可得到漂亮的倒三角形。
效果图如下:
代码实现:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.container {
width: 500px;
margin: 100px auto;
}
.triangle {
width: 0px;
height: 0px;
border-left: 50px solid red;
border-right: 50px solid blue;
border-top: 50px solid yellow;
border-bottom: 50px solid green;
}
.corner {
width: 0px; /* 宽高设置为0,很重要,否则达不到效果 */
height: 0px;
border: 50px solid yellow;
border-bottom-color: transparent; /* 设置透明背景色 */
border-left-color: transparent;
border-right-color: transparent;
}
</style>
</head>
<body>
<div class="container">
<div class="triangle">四边形</div>
</div>
<div class="container">
<div class="corner">倒三角</div>
</div>
</body>
</html>