如何用CSS（或SVG）倾斜画两条线？

Question

我想用CSS（或SVG）创建附加div元素的背景图片。

div.target {
  background-image: linear-gradient(
    to right bottom,
    transparent 50%,
    #00BCD4 50%
  );

我想用CSS（或SVG）创建的div元素的背景图片

Answer 1

我们可以使用多个背景图像渐变来完成此操作，如下面的代码段所示。较暗的阴影被指定为元素的背景颜色。然后，使用渐变创建的两个背景图像层以这样的方式放置，即它们产生期望的效果。在较暗的阴影上方添加部分透明的白色层将产生较浅的色调。

第二层的background-size应该更小，其background-position应该位于元素的左下方。

＆＃13;

＆＃13;

div {
  height: 200px;
  background-color: rgb(20,203,194);
  background-image: linear-gradient(to top left, rgba(255,255,255,0.25) 50%, rgba(255,255,255,0) 50%), linear-gradient(to top right, rgba(255,255,255,0.25) 50%, rgba(255,255,255,0) 50%);
  background-size: 100% 100%, 50px 50px;
  background-position: left top, left bottom;
  background-repeat: no-repeat;
}

＆＃13;

<div></div>

＆＃13;

＆＃13;

＆＃13;

已知有角度的CSS渐变会产生略微锯齿状（或不均匀或粗糙）的边缘，可以通过稍微偏移颜色停止点来避免这种情况。

＆＃13;

＆＃13;

div {
  height: 200px;
  background-color: rgb(20,203,194);
  background-image: linear-gradient(to top left, rgba(255,255,255,0.25) 50%, rgba(255,255,255,0) calc(50% + 1px)), linear-gradient(to top right, rgba(255,255,255,0.25) 50%, rgba(255,255,255,0) calc(50% + 1px));
  background-size: 100% 100%, 50px 50px;
  background-position: left top, left bottom;
  background-repeat: no-repeat;
}

＆＃13;

<div></div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以使用:before和:after伪元素执行此操作。

div {
  position: relative;
  width: 500px;
  height: 100px;
  background: #0BC7BE;
}
div:after {
  position: absolute;
  border-style: solid;
  border-width: 0 0 100px 500px;
  border-color: transparent transparent rgba(255, 255, 255, 0.3) transparent;
  right: 0;
  top: 0;
  content: "";
}
div:before {
  position: absolute;
  border-style: solid;
  border-width: 50px 0 0 70px;
  border-color: transparent transparent transparent rgba(255, 255, 255, 0.3);
  left: 0;
  bottom: 0;
  content: "";
}

<div></div>