css实现三角形

最新推荐文章于 2023-09-05 16:23:33 发布

王永存

最新推荐文章于 2023-09-05 16:23:33 发布

阅读量748

点赞数 1

分类专栏：网页常见效果 css

本文链接：https://blog.csdn.net/wang1006008051/article/details/79030353

版权

网页常见效果同时被 2 个专栏收录

16 篇文章 1 订阅

订阅专栏

css

14 篇文章 0 订阅

订阅专栏

css实现三角形

一、html代码定义一个元素

 <div class="arrow"></div>

二、利用div+before+after实现如下图效果：

利用after和before各实现一个三角形，after的index大于before。通过移位，覆盖即可实现此效果。

 .arrow{
            width: 100px;
            height: 100px;
            background-color: #fff;
            position: relative;
            border: 2px solid #333;
        }
        .arrow:before{
            content: "";
            border-bottom: 10px solid black;
            border-left: 10px solid transparent;
            border-right: 10px solid transparent;
            position: absolute;
            bottom:100%;
            left: 10px;
        }
        .arrow:after{
            content: "";
            border-bottom: 8px solid white;
            border-left:8px solid transparent;
            border-right: 8px solid transparent;
            position: absolute;
            bottom:100%;
            left: 12px;
         }

三、利用样式去控制显示三角形

1、下三角

 .arrow{
            width: 0;
            height: 0;
            border-width: 40px;
            border-style:solid;
            border-color: orange transparent transparent transparent;
        }

或者利用after/before伪类实现

.arrow:before{
            content: "";
            border-top: 40px solid orange;
            border-left: 40px solid transparent;
            border-right: 40px solid transparent;
        }

显示为：

2、上三角

   .arrow{
            width: 0;
            height: 0;
            border-width: 40px;
            border-style:solid;
            border-color: transparent  transparent orange transparent;
        }

或者利用after/before伪类实现

    .arrow:before{
            content: "";
            border-bottom: 40px solid orange;
            border-left: 40px solid transparent;
            border-right: 40px solid transparent;
        }

显示为：

3、右三角

  .arrow{
            width: 0;
            height: 0;
            border-width: 40px;
            border-style:solid;
            border-color: transparent transparent transparent orange;
        }

显示为：

4、左三角

   .arrow{
            width: 0;
            height: 0;
            border-width: 40px;
            border-style:solid;
            border-color: transparent orange transparent transparent ;
        }

显示为：