利用css构造边框三角

绘制三角形

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        .triangle_top,
        .triangle_bottom,
        .triangle_left,
        .triangle_right {
            width: 0;
            height: 0;
            margin: 20px;
            position: relative;
            float: left;
        }

        .triangle_top {
            border-left: 100px solid transparent;
            border-right: 100px solid transparent;
            border-bottom: 100px solid #06AC68;
        }

        .triangle_right {
            border-top: 100px solid transparent;
            border-bottom: 100px solid transparent;
            border-left: 100px solid #06AC68;
        }

        .triangle_bottom {
            border-left: 100px solid transparent;
            border-right: 100px solid transparent;
            border-top: 100px solid #06AC68;
        }

        .triangle_left {
            border-top: 100px solid transparent;
            border-bottom: 100px solid transparent;
            border-right: 100px solid #06AC68;
        }
    </style>
</head>

<body>
    <!--三角 - 上-->
    <div class="triangle_top"></div>

    <!--三角 - 右-->
    <div class="triangle_right"></div>

    <!--三角 - 下-->
    <div class="triangle_bottom"></div>

    <!--三角 - 左-->
    <div class="triangle_left"></div>
</body>

</html>

空心三角

代码 :

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        .triangle_top,
        .triangle_right,
        .triangle_bottom,
        .triangle_left {
            width: 100px;
            height: 100px;
            position: relative;
            border: 1px solid #06AC68;
            background-color: #FFF;
            margin: 20px;
            position: relative;
            float: left;
            border-radius: 10px;
        }

        .triangle_top:before {
            content: "";
            border: 10px solid transparent;
            border-bottom-color: #CCC;
            position: absolute;
            left: 40px;
            top: -20px;
        }

        .triangle_top:after {
            content: "";
            border: 10px solid transparent;
            border-bottom-color: #FFF;
            position: absolute;
            left: 40px;
            top: -19px;
        }

        .triangle_right:before {
            content: "";
            border: 10px solid transparent;
            border-left-color: #CCC;
            position: absolute;
            left: 100px;
            top: 40px;
        }

        .triangle_right:after {
            content: "";
            border: 10px solid transparent;
            border-left-color: #FFF;
            position: absolute;
            left: 99px;
            top: 40px;
        }

        .triangle_bottom:before {
            content: "";
            border: 10px solid transparent;
            border-top-color: #CCC;
            position: absolute;
            left: 40px;
            top: 100px;
        }

        .triangle_bottom:after {
            content: "";
            border: 10px solid transparent;
            border-top-color: #FFF;
            position: absolute;
            left: 40px;
            top: 99px;
        }

        .triangle_left:before {
            content: "";
            border: 10px solid transparent;
            border-right-color: #CCC;
            position: absolute;
            left: -20px;
            top: 40px;
        }

        .triangle_left:after {
            content: "";
            border: 10px solid transparent;
            border-right-color: #FFF;
            position: absolute;
            left: -19px;
            top: 40px;
        }
    </style>
</head>

<body>
    <!-- 三角 - 上 -->
    <div class="triangle_top"></div>

    <!-- 三角 - 右 -->
    <div class="triangle_right"></div>

    <!-- 三角 - 下 -->
    <div class="triangle_bottom"></div>

    <!-- 三角 - 左 -->
    <div class="triangle_left"></div>
</body>

</html>

实心三角

代码 :

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        .triangle_top,
        .triangle_right,
        .triangle_bottom,
        .triangle_left {
            width: 100px;
            height: 100px;
            background: #06AC68;
            margin: 20px;
            position: relative;
            float: left;
            border-radius: 10px;
        }

        .triangle_top:before {
            content: "";
            width: 0px;
            height: 0px;
            border-left: 10px solid transparent;
            border-right: 10px solid transparent;
            border-bottom: 10px solid #CCCCCC;
            position: absolute;
            top: -10px;
            left: 42px;
        }

        .triangle_right:before {
            content: "";
            width: 0px;
            height: 0px;
            border-top: 10px solid transparent;
            border-bottom: 10px solid transparent;
            border-left: 10px solid #CCCCCC;
            position: absolute;
            top: 42px;
            right: -10px;
        }

        .triangle_bottom:before {
            content: "";
            width: 0px;
            height: 0px;
            border-top: 10px solid #CCCCCC;
            border-left: 10px solid transparent;
            border-right: 10px solid transparent;
            position: absolute;
            top: 100px;
            left: 42px;
        }

        .triangle_left:before {
            content: "";
            width: 0px;
            height: 0px;
            border-top: 10px solid transparent;
            border-bottom: 10px solid transparent;
            border-right: 10px solid #CCCCCC;
            position: absolute;
            top: 40px;
            left: -10px;
        }
    </style>
</head>

<body>
    <!--三角 - 上-->
    <div class="triangle_top"></div>

    <!--三角 - 右-->
    <div class="triangle_right"></div>

    <!--三角 - 下-->
    <div class="triangle_bottom"></div>

    <!--三角 - 左-->
    <div class="triangle_left"></div>
</body>

</html>

利用css构造边框三角

绘制三角形

空心三角

实心三角

逆风微笑的代码狗

引用和评论

探索Go Module：常用命令及其用途

使用flex布局解决经典布局中overflow必须设置高度才能滚动问题

CSS Houdini：一种足以颠覆想象的 API

那些年我用过的SAP IDE

CSS---引用外部字体（一）---引入

SAP UI5 初学者教程之十三 - 如何添加自定义 CSS 类试读版

SAP UI5 初学者教程之十二 - 使用 CSS 类对 UI 进行进一步美化试读版