用 CSS 创建纯三角形

实现三角形，原理：块级元素，边框被分成了上下左右四分，需要显示的地方加上颜色，不需要显示的设置为透明色。

<!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

用 CSS 创建纯三角形

推荐阅读更多精彩内容