渐变背景+背景图片
background: url("../../assets/images/index/arrowLeft.png") repeatno-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;}
