倒三角的做法其实很简单，一个长宽都为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>
1704
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
