如何用线性渐变绘制完美的对角线

Question

我试图用linear-gradient绘制一个合适的对角线，但是当容器很小时，我无法弄清楚如何做到这一点＆gt;我试图得到一个适合10x10px容器的对角线，看起来像这样：

这是我最好的尝试。

＆＃13;

＆＃13;

div {
  background: linear-gradient(50deg, transparent 4px, red 4px, red 5px, transparent 5px) no-repeat 0px 25px / 10px 10px;
  display:block;
  width:100px;
  height:100px;
}

＆＃13;

<div></div>

＆＃13;

＆＃13;

＆＃13;

我做错了什么？

Answer 1

您可以使用to [side] [side]线性渐变，除了对角线的厚度之外，它是透明的，如下面的代码段所示。

（仅为演示添加边框，渐变无法实现。）

div {
  display: block;
  width: 100px;
  height: 100px;
  border: 1px solid;
  margin: 10px;
}
.border-2px {
  background: linear-gradient(to bottom left, transparent calc(50% - 2px), red calc(50% - 1px), red calc(50% + 1px), transparent calc(50% + 2px)) no-repeat 0px 0px / 100px 100px;
}
.border-1px {
  background: linear-gradient(to bottom left, transparent calc(50% - 1px), red 50%, transparent calc(50% + 1px)) no-repeat 0px 0px / 100px 100px;
}
.border-1px.small {
  height: 10px;
  width: 10px;
  background: linear-gradient(to bottom left, transparent calc(50% - .5px), red 50%, transparent calc(50% + .5px)) no-repeat 0px 0px / 10px 10px;
}
.border-1px.small-2 {
  height: 10px;
  width: 10px;
  background: linear-gradient(to bottom left, transparent calc(50% - 1px), #EEE calc(50% - .5px), red 50%, #EEE calc(50% + .5px), transparent calc(50% + 1px)) no-repeat 0px 0px / 10px 10px;
}
.border-1px.small-3 {
  background: linear-gradient(to bottom left, transparent calc(50% - .5px), red 50%, transparent calc(50% + .5px)) no-repeat 0px 0px / 10px 10px;
}
.border-1px.small-4 {
  background: linear-gradient(to bottom left, transparent calc(50% - 1px), #EEE calc(50% - .5px), red 50%, #EEE calc(50% + .5px), transparent calc(50% + 1px)) no-repeat 0px 0px / 10px 10px;
}

<div class='border-2px'></div>
<div class='border-1px'></div>
<div class='border-1px small'></div>
<div class='border-1px small-2'></div>
<div class='border-1px small-3'></div>
<div class='border-1px small-4'></div>

您的方法没有错，但最好在创建对角线时避免角度线性渐变，因为角度线性渐变并不总是产生对角线。根据容器的尺寸，生成的线可以是对角线（或）框内任何位置的线。您可以在my answer here中找到有关该信息的更多信息。使用to [side][side]渐变的另一个好处是它具有响应性。

如果渐变不适合你，那么你可以看一下使用SVG，但我不认为你可以根据对角线的需要创建具有精确厚度的线条。对角线并不像创建直线那么简单。

div {
  position: relative;
  height: 100px;
  width: 100px;
}
svg {
  position: absolute;
  height: 10px;
  width: 10px;
  top: 0px;
  left: 0px;
}
path {
  stroke-width: 1.05;
  stroke: red;
  fill: none;
}

<div>
  <svg viewBox='0 0 10 10'>
    <path d='M0,0 10,10' />
  </svg>
</div>

有关如何使用SVG对角线作为背景图像的演示here。 SVG图像也可以叠加在其他背景图像之上。

Answer 2

您可以使用::after伪类来执行此操作。

＆＃13;

＆＃13;

div{
width:28px;
height:28px;
position:relative;}

div:after{
content:"";
position:absolute;
border-top:1px solid red;
  width:40px;
  transform: rotate(45deg);
  transform-origin: 0% 0%;
}

＆＃13;

<div>
  </div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

白线

方向：顶部，左侧=>底部，右侧

.line {
  background: linear-gradient(
    45deg,
    transparent,
    transparent 45%,
    #fff 45%,
    #fff 55%,
    transparent 55%,
    transparent 100%
  );
}