background: url("../../assets/images/index/arrowLeft.png") repeat
            no-repeat,
          linear-gradient(to bottom, $color44 10%, $color4, $color44 90%);
背景图匀速过度
 
@keyframes moveLeft {
    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>
//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;
                    渐变背景+背景图片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;  } 
				
这里为大家带来几种表现惊人的css背景效果，纯css表现效果，有桌布效果，星空效果，心形效果，砖墙效果等。请欣赏：background: 
radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.15) 30%, rgba(255,255,255,.3) 32%, rgba(255,255,255,0) 33%) 0 0,
radial-gr
				
先看一张广告图，这是我们平时在浏览网页的时候，经常见到的一种文字广告设计，在文字周围绕着白色线条，我想大多数设计师可能就直接在ps中画一个png图片，再用css background-image 背景属性插入图片链接来实现。但今天这篇文章，我要用background-image 来画这个白色线条框。
 在了解了background这些属性后，我们就可以在html前端页面中用css来实现一些简单的背景图，例如：▲平铺的圆点背景 
▲平铺的斜线条背景  
▲平铺的马赛克背景
 ▲指定4种颜色的背
clip-path 属性是 clip 属性的升级版。
clip-path 属性使用裁剪方式创建元素的可显示区域。区域内的部分显示，区域外的隐藏。
clip 属性只能作用于 position 为 absolute 和 fixed 的元素且剪裁区域只能是正方形。
第一类值 basic-shape 一种形状，由不同的函数绘制。
第二类值 clip-source 用 <url> 的方式引用SVG 的 <clipPath> 来作为剪裁路径。
第三类值 geometr
clip-pathCSS 属性可以创建一个只有元素的部分区域可以显示的剪切区域。区域内的部分显示，区域外的隐藏。剪切区域是被引用内嵌的URL定义的路径或者外部svg的路径，或者作为一个形状。clip-path属性代替了现在已经弃用的剪切clip属性。
clip-source|basic-shape|geometry-box|none
  border-top: 50px solid transparent;
  border-bottom: 50px solid transparent;
  border-left: 50px solid #000;
</style>
实心三角形：
<div class="triangle"></div>
<style>
.triangle {
  width: 0;
  height: 0;
  border-top: 50px solid #000;
  border-right: 50px solid transparent;
  border-left: 50px solid transparent;
</style>
空心圆：
<div class="circle"></div>
<style>
.circle {
  width: 50px;
  height: 50px;
  border: 2px solid #000;
  border-radius: 50%;
</style>
实心圆：
<div class="circle"></div>
<style>
.circle {
  width: 50px;
  height: 50px;
  background-color: #000;
  border-radius: 50%;
</style>
希望对您有帮助！