CSS3 实现div方形小三角和对勾效果

最新推荐文章于 2023-09-27 18:15:05 发布

沉默是金~

最新推荐文章于 2023-09-27 18:15:05 发布

阅读量2k

点赞数

CC 4.0 BY-SA版权

分类专栏： CSS3 文章标签： css3 elementui vue.js

本文链接：https://blog.csdn.net/wyhc2021/article/details/122609395

CSS3 专栏收录该内容

11 篇文章

订阅专栏

本文介绍了一种使用纯CSS实现三角形图标和对勾图标的方案，并展示了如何在Vue项目中通过不同的类来切换元素的点击状态。此外，还提供了具体的代码示例。

1、ts

<div class="consultingRoom" :class="{ 'consultingRoomClick' : spanIndex.indexOf(index)>-1 }" v-for="(item,index) in stuRoomList" :key="item.roomId" :value="item.roomId" :title="item.roomName" @click="roomPich(item, index)">
    {{item.roomName}}
    <div :class="{'sjx':spanIndex.indexOf(index)>-1}"></div>
    <div :class="{'dg':spanIndex.indexOf(index)>-1}"></div>
  </div>

2、三角形和对勾css

  .sjx{
    margin-left:30px;
    width: 0;
    height: 0;
    position: absolute;
    right: 0px;
    bottom: 0px;
    border-bottom: 20px solid #1890ff;
    border-left: 20px solid transparent;
  }
  .dg{
    position: absolute;
    top: 19px;
    right: 0px;
    transform: rotate(14deg);
  }
  .dg:before {
    content: '\2713';
    color: #fff;
  }

3、点击样式

  .consultingRoom{
    display: inline-block;
    padding: 8px;
    margin-left: 15px;
    margin-bottom: 10px;
    border: 1px solid #e8e8e8;
    padding: 8px;
    cursor: pointer;
    border-radius: 8px;
    min-width: 120px;
    max-width: 120px;
    overflow:hidden;
    text-overflow:ellipsis;
    text-align: center;
    white-space: nowrap;
    word-break: break-all;
  }
  .consultingRoomClick{
    position: relative;
    display: inline-block;
    padding: 8px;
    margin-left: 15px;
    margin-bottom: 10px;
    border: 1px solid #409eff38;
    padding: 8px;
    cursor: pointer;
    border-radius: 8px;
    min-width: 120px;
    max-width: 120px;
    overflow:hidden;
    text-overflow:ellipsis;
    text-align: center;
    white-space: nowrap;
    word-break: break-all;
    color:#1890ff;
    background: #409eff38;
  }