css样式,背景渐变+图片,三角-实心-空心

渐变背景+背景图片

background: url("../../assets/images/index/arrowLeft.png") repeat
            no-repeat,
          linear-gradient(to bottom, $color44 10%, $color4, $color44 90%);

背景图匀速过度

@keyframes moveLeft {
  0% {
    background-position: 320px center;
  }
  100% {
    background-position: 0px center;
  }
}

 animation: moveLeft 5s linear infinite;

css画三角 -实心
实心三角一：

width:0;
height:0;
border:30px solid;
border-color: #f00 #ff0 #f0f #0ff;

实心三角二

<a class="a-after">

a.a-after::after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    background: #f00;
    border-width: 0 20px 30px 20px;
    border-color: #000 #000 #f0f #000;
    border-style: solid;
}

实心三角三

    content: "";
    display: block;
    width: 10px;
    height: 10px;
    background: #f00;
    clip-path: polygon(0 0, 100% 50%, 0 100%,);//右

    clip-path: polygon(50% 0, 100% 100%, 0 100%); //上
	clip-path: polygon(50% 0,0 100%,10% 100%,50% 20%,50% 20%,85% 90%,10% 90%,10% 100%,100% 100%); //空心三角上

这个网站CSS clip-path maker你可以快捷地创建简单的 clip-path 图形

css画三角-空心

//html部分
 <div class="tabs">
          <span @click="tagSwitch(0)" class="hand">
            <span class="tabLeft" :class="{ activeTab: tagType == 0 }"></span>
            <span class="tab-item" :class="{ activeTab: tagType == 0 }"
              >业务类</span
            >
          </span>
          <span @click="tagSwitch(1)" class="hand">
            <span class="tab-item" :class="{ activeTab: tagType == 1 }"
              >部门类</span
            >
            <span class="tabRight" :class="{ activeTab: tagType == 1 }"></span>
          </span>
        </div>
        
//data定义数据部分
tagType:0

//css部分
.tabs {
  color: $-primary;
  font-weight: bold;
  position: relative;
  display: inline-block;
  margin: 40px 0 20px 0;
  .tab-item {
    padding: 6px 20px;
    border: 1px solid $-primary;
  }
  .activeTab {
    background-color: $-primary !important;
    color: #fff;
  }
  .tabLeft,
  .tabRight {
    position: absolute;
    display: inline-block;
    width: 24px;
    height: 24px;
    border-top: 1px solid $-primary;
    border-right: 1px solid $-primary;
    z-index: 99;
    background-color: #fff;
    margin-top: -1px;
  }
  .tabLeft {
    left: -12px;
    transform: rotate(-135deg);
  }
  .tabRight {
    right: -12px;
    transform: rotate(45deg);
  }
}

.staff_name_header::after {
      content: "";
      display: inline-block;
      width: 24px;
      height: 16px;
      background: linear-gradient(to bottom, #333 50%, transparent 0);
      background-size: 100% 4px;
      clip-path: polygon(40% 0, 60% 0, 100% 100%, 0% 100%);
      vertical-align: middle;
      margin-left: 4px;
    }