- 实现三角形，原理：块级元素，边框被分成了上下左右四分，需要显示的地方加上颜色，不需要显示的设置为透明色。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
.triang {
width: 0px;
border: 20px solid transparent;
border-top: 20px solid red;
border-bottom: 20px solid green;
}
</style>
<body>
<div class="triang">
</div>
</body>
</html>
截图：
trangle.png
- 实现凸起的三角形样式，原理：底下是一个黑色边框的三角形，覆盖上一个白色的后，三角形中间的颜色被覆盖，三角形的边留了下来。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
.triang {
position: absolute;
border: 20px solid transparent;
}
</style>
<body>
<div class="triang" style="border-bottom-color: #000000; "></div>
<div class="triang" style="border-bottom-color: #ffffff"></div>
</body>
</html>
截图：
trangle.png
网友评论