css完成向下的三角形

青果小橙子

已于 2024-01-22 13:42:00 修改

阅读量765

点赞数 10

文章标签： javascript 开发语言 ecmascript

于 2024-01-22 13:40:37 首次发布

本文链接：https://blog.csdn.net/weixin_46391404/article/details/135746086

版权

在这里插入图片描述

<div class="content-item eight">
  <div class="content-item-left">
     <div class="number">0</div>
     <div class="content-item-left-text">待处理</div>
   </div>
   <div class="content-item-img">
     <img src="@/assets/image/7.png" alt="待处理" />
   </div>
   <div class="demo"></div>
 </div>

.eight:hover{
    border: 1px solid #96B9F0;

    .demo {
      border-right: solid 8px #96B9F0;
    }

    .demo:after {
      border-right: solid 7px #DCECFF;
    }
  }
 .demo {
    width: 0;
    height: 0;
    position: relative;
    top: -4px;
    left: 50%;
    border-top: solid 8px transparent;
    border-bottom: solid 8px transparent;
    transform: rotate(270deg);
  }

  .demo:after {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    left: 2px;
    top: -7px;
    border-top: solid 7px transparent;
    border-bottom: solid 7px transparent;
  }