正方形中的水平和垂直线

Question

下面是我正在尝试的图像,我设法使用CSS得到一个正方形,但我正在尝试在正方形中的水平和垂直线.

.hub{
   width: 119px;
   height: 101px;
   background: #b5adad;
}

<div class="hub"></div>

Answer 1

有很多方法可以做到这一点,其中一种方法是使用如下的渐变:( 有问题的图像实际上是一个矩形.)

方法非常简单 - 我们使用2个线性渐变来创建两条细的纯色线,然后定位图像以满足我们的需求.即使它只创建纯色,也会使用线性渐变,因为它比背景颜色更容易控制图像的大小和位置.

div {
  height: 100px;
  width: 200px;
  border: 1px solid red;
  background-image: linear-gradient(to bottom, red, red), linear-gradient(to right, red, red);
  background-repeat: no-repeat;
  background-size: 1px 100%, 100% 1px;
  background-position: 20px 0px, 0px 10px;
}

<div></div>

我们还可以创建一个具有淡出或阴影效果的输出,如下图所示:

div {
  height: 100px;
  width: 200px;
  border: 1px solid;
  background-color: gray;
  background-image: linear-gradient(to bottom, black, black), linear-gradient(to right, red, transparent), linear-gradient(to right, black, black), linear-gradient(to bottom, red, transparent);
  background-repeat: no-repeat;
  background-size: 1px 100%, 1px 100%, 100% 1px, 100% 1px;
  background-position: 20px 0px, 21px 0px, 0px 10px, 0px 11px;
  box-shadow: inset 0px 0px 3px red;
}

<div></div>