：：after三角形画法

最新推荐文章于 2023-06-01 10:12:59 发布

前端方程

最新推荐文章于 2023-06-01 10:12:59 发布

阅读量677

点赞数

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

本文链接：https://blog.csdn.net/weixin_44040867/article/details/117675652

版权

css 专栏收录该内容

4 篇文章 0 订阅

订阅专栏


hetml
  <div class="mianbao">
            <div class="div">
              <span> <i class="el-icon-s-home"></i></span>
              <span v-for="(item, i) in breadArr" :key="i">{{
                item.title
              }}</span>
            </div>
          </div>

css
.mianbao {
        .div {
          span {
            width: 90px;
            height: 32px;
            text-align: center;
            line-height: 32px;
            background-color: #fff;
            display: inline-block;
            position: relative;
          }
          span::after {
              border-left: 16px solid transparent;
                border-right: 16px solid transparent;
                border-top: 16px solid #fff;
                content: "";
                position: absolute;    
                top: 8px;
                right: -24px;
                width: 0;
                z-index: 99;
				transform:rotate(270deg);
          }

          span:nth-child(1) {
            color: #fff;
            background-color: #2a62ce!important;
            text-align: center;
            height: 32px;
            line-height: 32px;
            width: 52px;
          }
          span:nth-child(1)::after{
                border-top: 16px solid #2a62ce;
          }
           span:nth-child(3) {
                 width: 126px!important;
          }
        
       
        }