css - 如何使用 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>

已知 Angular 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>