css实现左右小三角和梯形

最新推荐文章于 2024-08-02 18:37:54 发布

qdcxy0

最新推荐文章于 2024-08-02 18:37:54 发布

阅读量782

点赞数

本文链接：https://blog.csdn.net/xx_ll_/article/details/106128480

版权

需求：根据梯形中显示的左右小三角图标，点击梯形div实现将内容收缩显示的功能，同时切换小三角形状
在这里插入图片描述

vue template里面的代码

   <div class="triangle-btn" @click="showLeftForm=!showLeftForm">
        <div class="shape-space"/>
        <div v-if="!showLeftForm" class="triangle-right"/>
        <div v-if="showLeftForm" class="triangle-left"/>
      </div>

css样式

.triangle-btn{
  align-self: center;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-right: 10px solid transparent;
  border-left: 20px solid #D0CFCF ;
  z-index: 100;
  position: relative;
}
.shape-space{
  width: 10px;
  height: 60px;
  background-color: transparent;
}
.triangle-right{
  position: absolute;
  left: -15px;
  top: 20px;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: 8px solid transparent;
  border-left: 8px solid #669900;
}
.triangle-left{
  position: absolute;
  left: -25px;
  top: 20px;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: 8px solid #669900;
  border-left: 8px solid transparent;
}