Question

我需要div内的虚线对角线。

在这个方面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条线，并根据需要留下对角线。

但是如何让这条线破灭？

小提琴在这里：fiddle

谢谢！

编辑：抱歉，看到示例代码中的100px宽度，div正在改变宽度，并且由js完成。这会改变对角线度数，所以变换：rotate（-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

Answer 2

.line {
  margin-top: 50px;
  height: 2px;
  background: linear-gradient(to right, transparent 50%, #223049 50%), linear-gradient(to right, #00b9ff, #59d941);
  background-size: 16px 2px, 100% 2px;
}

body{
  background-color: #223049;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="line"></div>

用css线性渐变创建一条虚线对角线

2 个答案: