如何用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应当是在元件的左底侧.

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;
}

<div></div>

已知有角度的CSS渐变产生略微锯齿状(或不均匀或粗糙)的边缘,并且可以通过稍微偏移颜色停止点来避免,如下面的演示.

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;
}

<div></div>