DIV相邻两边的边框会形成45度夹角向外延申。
所以将DIV的宽度，高度设定为零，这样图形中心区域就不会显示DIV的内容。
将三角形尖端方向的边框设定为0，左右两边设定为透明，这样就会只显示唯一剩余的边框（是个三角形）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.triangle{
width: 0px;
height: 0px;
border-top: 0px solid #00a497;
border-bottom: 50px solid #cc7eb1;
/* border-left: 50px solid #165e83;
border-right: 50px solid #c85179; */
border-left: 50px solid transparent;
border-right: 50px solid transparent;
}
</style>
</head>
<body>
<div class="triangle"></div>
</body>
</html>
网友评论