css小三角的制作

小引：

思考：给定一个盒子，其宽度高度为0，给定上下左右各10px的边框，设置四个边框颜色不同，会是什么效果。

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

<body>
    <div></div>

效果：

 

 因此，当我们想设置三角效果时，可以参考这个，将三个边框的颜色设为透明（transparent），剩下一个三角设置想要的颜色即可

 升级版（设置直角三角形）：

<style>
        div {
            width: 0;
            height: 0;
            border-color: transparent red transparent transparent;
            border-style: solid;
            border-width: 100px 50px 0 0;

        }
    </style>
</head>

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

 

posted @ 2020-04-18 22:00  echobbd  阅读(201)  评论(0)  编辑  收藏  举报