css使用边框凑成三角形

最新推荐文章于 2023-04-11 10:00:22 发布

ps酷教程

最新推荐文章于 2023-04-11 10:00:22 发布

阅读量101

点赞数

分类专栏：前端学习

本文链接：https://blog.csdn.net/qq_16992475/article/details/119806595

版权

前端学习专栏收录该内容

145 篇文章 7 订阅

订阅专栏

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    /* 所以border-xx-width控制的就是宽度和高度都为0的中心点到四边的距离，修改四个距离，可以做出想要的三角形，  
       ,然后只要把不想要的边的颜色改成transparent，让它透明掉，只留下想要的边，就可以了*/
        .triangle{
            width: 0;
            height: 0;
            border: 20px solid pink;
            border-top-color: red;
            border-right-color: green;
            border-bottom-color: blue;
            border-left-color: yellow;
            border-top-width: 20px;
            border-right-width: 20px;
            border-bottom-width: 20px;
            border-left-width: 20px;
        }
    </style>
</head>
<body>
    <div class="triangle"></div>
</body>
</html>