用css实现三角形利用css构造边框三角

顺晟科技

2022-10-19 12:34:35

295

绘制三角形

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

上一篇：手机单屏模式浅谈移动端单屏解决方案下一篇：React CSS-In-JS 方案

网站建设

Css

用css实现三角形利用css构造边框三角

绘制三角形

空心三角

实心三角

Css

用css实现三角形 利用css构造边框三角

绘制三角形

空心三角

实心三角

用css实现三角形利用css构造边框三角