如何使用线性渐变制作纯 css horizontal/vertical 和特定厚度的角线，无论容器大小如何，始终居中

Question

我正在尝试制作三种类型的矩形瓷砖，无论它们的尺寸如何，它们都应该

一条垂直居中的水平线，宽度为 20 像素

或

一条水平居中的垂直线，宽度为 20 像素

或

一条 "corner" 线，两条边都穿过图块边缘的中心，宽度为 20 像素

我试着用线性渐变来完成这项工作，但我设法用百分比来接近（但不完全）我想要的东西..

<div class="small corner-bg"></div>
<div class="small vertical-bg"></div>
<div class="small horizontal-bg"></div>
<div class="big corner-bg"></div>
<div class="big vertical-bg"></div>
<div class="big horizontal-bg"></div>

.small {
  width: 100px;
  height: 30px;
  border: 1px solid red;
}

.big {
  width: 400px;
  height: 50px;
  border: 1px solid red;
}

.vertical-bg {
    background-image: linear-gradient(90deg, transparent 33%, #0033a0 33%, #0033a0 66%, transparent 66%);
}

.horizontal-bg {
    background-image: linear-gradient(transparent 33%, #0033a0 33%, #0033a0 66%, transparent 66%);
}

.corner-bg {
    background-image: linear-gradient(transparent 66%, #003580 33%), linear-gradient(90deg, transparent 66%, #003580 33%);
    background-repeat: no-repeat;
    background-position: -18px -12px;
}

https://jsfiddle.net/tq7aqs78/

这是我完成的和我需要的：

Answer 1

我让它工作如下所示：

.small {
  width: 100px;
  height: 30px;
  border: 1px solid red;
}

.big {
  width: 400px;
  height: 50px;
  border: 1px solid red;
}

.horizontal-bg {
    background-image: linear-gradient(transparent calc(50% - 5px), #000 calc(50% - 5px), #000 calc(50% + 5px), transparent calc(50% + 5px));
}

.vertical-bg {
    background-image:  linear-gradient(90deg,transparent calc(50% - 5px), #000 calc(50% - 5px), #000 calc(50% + 5px), transparent calc(50% + 5px));
}

.corner-bg {
    background-image: 
    linear-gradient(90deg,transparent calc(50% + 5px), white calc(50% + 5px), white calc(60% + 5px)),
    linear-gradient(transparent calc(50% + 5px), white calc(50% + 5px), white calc(60% + 5px)),
    linear-gradient(transparent calc(50% - 5px), #000 calc(50% - 5px), #000 calc(50% + 5px), transparent calc(50% + 5px)), 
    linear-gradient(90deg,transparent calc(50% - 5px), #000 calc(50% - 5px), #000 calc(50% + 5px), transparent calc(50% + 5px));

    background-repeat: no-repeat;
}

https://jsfiddle.net/tq7aqs78/3/

如何使用线性渐变制作纯 css horizontal/vertical 和特定厚度的角线，无论容器大小如何，始终居中

How to make pure css horizontal/vertical and corner line of specific thickness, always centered, regardless of container size using linear-gradients

css

background

linear-gradients