html - 使用 css linear-gradient 创建一条虚线对 Angular 线

Question

我需要在 div 中添加对 Angular 线。

在这条路上draw diagonal lines in div background with CSS

我找到了如何用这段代码画十字

.crossed {

background: 
   linear-gradient(to top left,
       rgba(0,0,0,0) 0%,
       rgba(0,0,0,0) calc(50% - 0.8px),
       /*rgba(0,0,0,1) 50%,*/
       rgba(0,0,0,0) calc(50% + 0.8px),
       rgba(0,0,0,0) 100%),
   linear-gradient(to top right,
       rgba(0,0,0,0) 0%,
       rgba(0,0,0,0) calc(50% - 0.8px),
       rgba(0,0,0,1) 50%,
       rgba(0,0,0,0) calc(50% + 0.8px),
       rgba(0,0,0,0) 100%);
}

通过注释掉如上所示的行，它从 x 中删除了 1 行，并根据需要留下对 Angular 线。

但是我怎样才能让这条线变成虚线呢？

fiddle 在这里:fiddle

谢谢!

编辑: 抱歉，在示例代码中看到 100px 宽度，div 正在通过 js 更改宽度和高度。这改变了对 Angular 线度数，所以变换:旋转(-45deg)；不会工作

Answer 1

一个简单的选择是为虚线背景使用 svg

<div class='box'>
  <svg style='width: 100%; height: 100%;'>
      <line stroke-dasharray="5, 5"  x1="0" y1="100%" x2="100%" y2="0" style="stroke:rgb(255,0,0);stroke-width:2"/>
  </svg>
  <div>
  your content here over the svg
  </div>
</div>

此处演示:https://jsfiddle.net/u25q9uq4/1/

如果你不想在代码中使用 svg，你仍然可以将它用作 base64 的 css 背景，

div.box{
  position: relative;
  width: 211px; 
  height: 55px; 
  border: 1px solid black;
  background: url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxsaW5lIHN0cm9rZS1kYXNoYXJyYXk9IjUsIDUiICB4MT0iMCIgeTE9IjEwMCUiIHgyPSIxMDAlIiB5Mj0iMCIgc3R5bGU9InN0cm9rZTpyZ2IoMjU1LDAsMCk7c3Ryb2tlLXdpZHRoOjIiLz48L3N2Zz4=") no-repeat center center;
background-size: cover;
}  

此处演示:https://jsfiddle.net/u25q9uq4/2/

我用了this tool将 svg 转换为 base64

这是svg转换后的最终形式

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%"><line stroke-dasharray="5, 5"  x1="0" y1="100%" x2="100%" y2="0" style="stroke:rgb(255,0,0);stroke-width:2"/></svg>

您可以更改此示例中虚线链接的颜色和笔划，将其转换并插入到您的 css 中。

祝你好运。

编辑:Examples of svg dashed lines