css - 如何使用线性渐变制作特定厚度的纯 css 水平/垂直和 Angular 线，始终居中，无论容器大小如何

Question

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

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

或

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

或

1. 一条“Angular ”线，两条边都穿过图 block 边缘的中心，宽度为 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/