使用CSS绘制3条垂直线和图像

Question

所以我真的很新用CSS，我需要在Image和Image上面添加3条垂直红线，这些线必须将图像分成4个大小相同的部分。图像的大小总是465 * 346，到目前为止我的标记看起来像这样

CSS：

.logo-container {
    position: relative;
    height: 87px;
    width: 35%;
    margin: 0 auto;
    min-width: 144px;
}

.logo {
    position: relative;
    width: 72px;
    height: 87px;
    z-index: 2;
}

.logo-line {
    position: relative;
    display: inline-block;
    top: -50%;
    width: 20%;
    height: 2px;
    background: #333;
}

HTML：

<div id="preview-image-wrapper">
   <span class="firstOverlayLine" ></span>
   <span class="secondOverlayLine"></span>
   <span class="thirdOverlayLine"></span>
   <img id="mainImage" type="image" class="mainimage" data-bind="attr: {src: SelectedImagePath}" />
</div>

以上是我尝试修改this示例以使其符合我的需要，但到目前为止没有成功，所以我来到这里看看是否有人可以帮助我。

最终结果如下：

提前感谢您提供的任何帮助。

Answer 1

您可以使用:before和:after：伪元素。

＆＃13;

＆＃13;

#img {
  position: relative;
  width: 465px;
  height: 346px;
  background: url(http://dummyimage.com/465x346/ddd5ed/fff);
  border: 1px solid red;
}
#img:before, #img:after {
  position: absolute;
  content: '';
  width: 25%;
  height: 100%;
  top: 0;
  left: 25%;
  border-left: 1px solid black;
  border-right: 1px solid black;
  box-sizing: border-box;
}
#img:after {
  left: 75%;
  border-right: 0;
}

＆＃13;

<div id="img"></div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

你可以像这样做一些原始的东西 - 在图像上漂浮1px宽的跨度，保留你的原始HTML：

div {
  width: 465px;
  position: relative;
}

span {
  position: absolute;
  display: block;
  height: 346px;
  width: 1px;
  background: red;
}

.firstOverlayLine {
  left: 25%;
}

.secondOverlayLine {
  left: 50%;
}

.thirdOverlayLine {
  left: 75%;
}

<div id="preview-image-wrapper">
   <span class="firstOverlayLine" ></span>
   <span class="secondOverlayLine"></span>
   <span class="thirdOverlayLine"></span>
   <img src="http://placehold.it/465x346">
</div>

Answer 3

使用无序列表的备选方案：

http://jsfiddle.net/a4q63mwc/

<div id="preview-image-wrapper">
    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <img src="http://placehold.it/465x346" />
</div>   


div, img {
  width: 465px;
  height: 346px;
  position: relative;
}

ul { 
    margin:0;
    padding:0;
    list-style-type: none;
    position: absolute;
    display: block;
    height: 346px;
    width:100%;
    z-index:200;
    overflow:hidden;
}
li { 
    height:346px; 
    border-right:1px solid red; 
    width:25%; 
    display:inline-block;
    margin-right: -4px;
}

Answer 4

对于水平线，如果有人需要的话。

div {
  width: 465px;
  position: relative;
}

span {
  position: absolute;
  display: block;
  height: 2px;
  width: 465px;
  background: red;
}

.firstOverlayLine {
  top: 50%;
}

<div id="preview-image-wrapper">
   <span class="firstOverlayLine"></span>
   <img src="http://placehold.it/465x346">
</div>