好看的三角与label

事实证明

已于 2022-03-04 11:43:45 修改

阅读量178

点赞数

分类专栏：小玩意文章标签：自动

于 2022-03-04 11:42:38 首次发布

本文链接：https://blog.youkuaiyun.com/xuehongnizhao/article/details/123273296

版权

小玩意专栏收录该内容

7 篇文章

订阅专栏

好看的label 和好看的三角

在这里插入图片描述
label部分

<template>
  <div>
    <div class="jzlabel"> {{text}} <span class="triangle-left"></span>
    </div>
    <br>
  </div>
</template>
<script>
export default {
  props: {
    text: String
  },
};

</script>
<style scoped lang="scss">
.jzlabel {
  margin-left: -10px;
  text-indent: 40px;
  background: rgb(32, 88, 230);
  height: 30px;
  line-height: 30px;
  font-size: 16px;
  // font-weight: bold;
  color: white;
  display: inline-block;

  .triangle-left {
    width: 0;
    height: 0;
    padding-right: 40px;
    border-top: 15px solid transparent;
    border-right: 20px solid white;
    border-bottom: 15px solid transparent;
    float: right;
    ;
  }
}

</style>

好看的三角


<div class="sjContainer" v-for="(item,index) in familyList" :key="index">
      <div class="sjright" @click="handleRemove(index)"><span>x</span></div>
      <div class="sjleft"><span>{{index+1}}</span></div>
    </div>
 .sjContainer {
   position: relative;
   margin-bottom: 10px;
 }

 .sjright {
   // color: white;
   margin-top: -10px;
   border-left: 40px solid transparent;
   border-right: 40px solid rgb(32, 88, 230);
   border-bottom: 40px solid transparent;
   height: 0;
   width: 0;
   position: absolute;
   right: 0px;
   z-index: 2;
   cursor: pointer;

   span {
     margin-top: 2px;
     margin-left: 22px;
     position: absolute;
     color: white;
   }
 }

 .sjleft {
   // color: white;
   margin-top: -10px;
   border-right: 40px solid transparent;
   border-top: 40px solid rgb(32, 88, 230);
   height: 0;
   width: 0;
   position: absolute;
   left: 0px;
   z-index: 2;

   span {
     margin-top: -37px;
     margin-left: 5px;
     position: absolute;
     color: white;
   }
 }

交流 QQ群 312359522