CSS创建的6种不同的对角线分区特效代码

使用方法

.angle {
  height: 100px;
  width: 600px;
  position: relative;
  background: rgba(0, 0, 0, 0.1);
  overflow: hidden;
  margin: auto;
  margin-bottom: 20px;
  text-align: left;
}
.angle span {
  background: rgba(255, 255, 255, 0.4);
  color: #222;
  padding: 10px;
  margin: 20px;
  display: inline-block;
}
.angle::after {
  position: absolute;
  right: 0;
  bottom: 0;
  content: "";
}

.angle-1::after {
  border: 0 solid transparent;
  height: 0;
  border-top-width: 40px;
  border-left-width: 1000px;
  border-left-color: blue;
}

.angle-2::after {
  left: -20px;
  right: -20px;
  bottom: -30px;
  height: 40px;
  transform: rotate(2deg);
  background: blue;
}

.angle-3::after {
  left: 0;
  height: 0;
  padding-top: 5%;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="1000" height="40"><polygon points="0,1000 0,0 1000,40" style="fill:rgb(0,0,255);stroke-width:0"></polygon></svg>');
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: 100%;
}

.angle-4::after {
  padding-top: 5%;
  left: 0;
  background: linear-gradient(2.5deg, blue 43%, transparent 45%);
}

.angle-5::after {
  height: 0;
  left: 0;
  padding-top: 5%;
  background: blue;
  -webkit-clip-path: polygon(0 0, 100% 100%, 0 100%);
          clip-path: polygon(0 0, 100% 100%, 0 100%);
}

.angle-6::after {
  background: blue;
  left: 0;
  padding-top: 5%;
  height: 0;
  -webkit-clip-path: url(#triangle);
          clip-path: url(#triangle);
}

body {
  margin: 40px;
  padding: 0;
  font-family: Helvetica Neue, Helvetica, sans-serif;
  text-align: center;
}