Q:

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

I am trying to make three types of rectangle tiles that no matter what their size they should have 

one vertically centered horizontal line of 20 pixels width

or

one horizontally centered vertical line of 20 pixels width

or

one "corner" line that has both edges going through the centers of the edfes of the tile, having 20 pixels width

I tried to make this work with linear-gradients but I managed to make something close (but not quite) to what I want using percentages..
<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/
Here is what I have accomplished and what I need: 

A:

I made it work like it is shown below: 
.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/

