CSS如何实现小三角

一起加油卷前端

已于 2022-04-01 16:43:32 修改

阅读量2k

点赞数 2

分类专栏： CSS 文章标签： css

于 2022-04-01 16:02:53 首次发布

本文链接：https://blog.csdn.net/qq_54598875/article/details/123899882

版权

CSS 专栏收录该内容

2 篇文章 1 订阅

订阅专栏

CSS如何实现小三角

实现原理：

默认情况下div为内容盒子，也就是div的宽高是作用于内容的空间宽度和高度（或者内容宽高就是盒子宽高）。那我们就可以把div盒子宽高设为0，然后让边框撑开盒子。具体语法如下：

<html> 
<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 type="text/css">
            /* 这是css实现三角的简约写法 */
        div {
            /* 宽高必须是0 */
            width: 0;
            height: 0;
            margin: 50px auto;
            /* 把全部的边框设置透明色 */
            border: 20px solid transparent;
         /* 总共面积为40*40,宽度由left和right撑开,高度由top和bottom撑开 */
             /* 把想拎出来的边单独设置颜色 */
            border-top-color: aqua;
            }
    </style>
</head>

<body> 
    <div></div>   
</body>

</html>