下面是我正在尝试的图像,我设法使用 CSS 得到一个正方形,但我正在尝试在正方形中绘制水平和垂直线。
.hub{
width: 119px;
height: 101px;
background: #b5adad;
}
<div class="hub"></div>
最佳答案
有很多方法可以做到这一点,其中一种方法是使用如下所示的渐变:(有问题的图像实际上是一个矩形。)
该方法非常简单 - 我们使用 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>
关于html - 正方形中的水平线和垂直线,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41932630/