css三角实现

最新推荐文章于 2024-10-09 20:10:15 发布

weixin_45973237

最新推荐文章于 2024-10-09 20:10:15 发布

阅读量92

点赞数

分类专栏：笔记文章标签： css

本文链接：https://blog.csdn.net/weixin_45973237/article/details/106481936

版权

笔记专栏收录该内容

2 篇文章 0 订阅

订阅专栏

css三角实现

主要代码

			width: 0;
            height: 0;
            font-size: 0;
            line-height: 0;
            border-color: transparent transparent transparent red;
            border-style: solid;
            border-width: 200px 0 0 200px;

原理
设置一个大小为0的盒子，为其设置边框,为除了所需三角形在的其他三部分设置透明色以获得所需三角形。
共有四种三角形可截取

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1 {
            width: 0;
            height: 0;
            font-size: 0;
            line-height: 0;
            border-color: transparent red transparent transparent;
            border-style: solid;
            border-width: 50px 50px 0 0;
        }

        .box2 {
            width: 0;
            height: 0;
            font-size: 0;
            line-height: 0;
            border-color: transparent transparent transparent red;
            border-style: solid;
            border-width: 50px 0 0 50px;
        }

        .box3 {
            width: 0;
            height: 0;
            font-size: 0;
            line-height: 0;
            border-color: transparent red transparent transparent;
            border-style: solid;
            border-width: 0 50px 50px 0;
        }

        .box4 {
            width: 0;
            height: 0;
            font-size: 0;
            line-height: 0;
            border-color: transparent transparent transparent red;
            border-style: solid;
            border-width: 0 0 50px 50px;
        }

        */
    </style>
</head>

<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
</body>

</html>