正方形中的水平线和垂直线答案

【问题标题】：horizontal and vertical lines in a square正方形中的水平线和垂直线
【发布时间】：2019-08-11 20:44:03
【问题描述】：

下面是我正在尝试的图像，我设法使用 CSS 获得了一个正方形，但我正在尝试在一个正方形中绘制水平线和垂直线。

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

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

【问题讨论】：

标签： html css css-shapes

【解决方案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;
}

&lt;div&gt;&lt;/div&gt;

我们还可以创建一个具有淡出或阴影效果的输出，就像有问题的图像一样：

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;
}

&lt;div&gt;&lt;/div&gt;

【讨论】：

不客气@pradeep。请考虑将答案标记为已接受（单击答案一侧投票按钮下方的空心刻度线）。这通常是问题在 SO 中被标记为“已解决”的方式。

【解决方案2】：

另一种方法是使用:before 和:after 伪元素：

.hub{
   width: 119px;
   height: 101px;
   background: #b5adad;
  position: relative;
  padding: 18px 0 0 18px;
}
.hub:after, .hub:before {
  content: " ";
  background: black;
  display: block;
  position: absolute;
}
.hub:after {
  width: 1px;
  height: 100%;
  left: 15px;
  top: 0;
}
.hub:before {
  width: 100%;
  height: 1px;
  top: 15px;
  left: 0;
}

&lt;div class="hub"&gt;Lorem ipsum dolor amet&lt;/div&gt;

【讨论】：

是的，这也是一种有效的方法！
@Harry 不过我最喜欢你的