渐变背景+背景图片
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;
}