用css画一个三角形——利用边框

最新推荐文章于 2025-04-29 10:05:19 发布

白蔹_

最新推荐文章于 2025-04-29 10:05:19 发布

阅读量379

点赞数 1

分类专栏：前端知识点实践文章标签： css 前端 html

本文链接：https://blog.youkuaiyun.com/qq_52335038/article/details/127215412

版权

前端知识点实践专栏收录该内容

4 篇文章

订阅专栏

原理：可以自己动手体验一下，记得更加深刻。将一个盒子设置成宽高为200px的正方形，把边框设置为100px。四个边框设置为不同颜色，当宽度调为0时，盒子会怎样变化，高度也调为0时，盒子会怎样变化。宽高都为0时，边框会并到一起，就形成了四个三角形，那我们直接把边框设置为透明，想要向上的三角形，就把上边框颜色设置为不透明的颜色，就能得到四个方向的三角形

原理参考：博主钟阿能

链接：http://t.csdn.cn/JJNfK

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css三角形</title>
    <style>
        .up {
            height: 0;
            width: 0;
            border: 200px solid transparent;
            border-bottom-color: palegoldenrod;
            /* border-width: 0 200px 400px; */
        }
        
        .down {
            height: 0;
            width: 0;
            border: 200px solid transparent;
            border-top-color: aquamarine;
            margin-top: 100px;
        }
        
        .left {
            height: 0;
            width: 0;
            border: 200px solid transparent;
            border-left-color: aquamarine;
            margin-top: -100px;
        }
        
        .right {
            height: 0;
            width: 0;
            border: 200px solid transparent;
            border-right-color: aquamarine;
        }
        
        .box {
            width: 100px;
            height: 100px;
            border: 50px solid red;
            border-bottom-color: greenyellow;
            border-left-color: palevioletred;
            border-right-color: aqua;
        }
    </style>
</head>

<body>
    <div class="up"></div>
    <div class="down"></div>
    <div class="left"></div>
    <div class="right"></div>
    <div class="box"></div>
</body>

</html>

还可以调整边框宽度，得到等腰三角形

   .up {
            height: 0;
            width: 0;
            border: 200px solid transparent;
            border-bottom-color: palegoldenrod;
            border-width: 0 200px 400px;
        }

直角三角形：

  .right {
            height: 0;
            width: 0;
            border: 100px solid transparent;
            border-left-color: purple;
            border-bottom-color: purple;
        }