【css面试题】三角形的做法

纵有千堆雪与长街

已于 2022-08-16 16:55:44 修改

阅读量136

点赞数

分类专栏： css面试题文章标签： css javascript 前端

于 2022-08-16 16:44:46 首次发布

本文链接：https://blog.csdn.net/qq_40992225/article/details/126369374

版权

css面试题专栏收录该内容

21 篇文章 2 订阅

订阅专栏

 <style>
        .box1 {
            width: 0;
            height: 0;
            border: 10px solid pink;
        }
    </style>
</head>

<body>
    <div class="box1"></div>
</body>

结果如下：
在这里插入图片描述
我们将代码修改如下：

<style>
        .box1 {
            width: 0;
            height: 0;
            /* border: 10px solid pink; */
            border-top: 10px solid pink;
            border-right: 10px solid red;
            border-bottom: 10px solid yellow;
            border-left: 10px solid green;
        }
    </style>
</head>

<body>
    <div class="box1"></div>
</body>

在这里插入图片描述
由此可见，我们想要得到一个三角形，就可以讲其他三个设置为透明即可。

  <style>
        .box2 {
            width: 0;
            height: 0;
            border: 10px solid transparent;
            border-top-color: pink;
            margin: 100px auto;
        }
    </style>
</head>

<body>
    <div class="box2"></div>
</body>