Question

所以我有这两个h2元素。

XXXX YYYY

我想在index.html上实现这个目标：

----------
          XXXXXX
                 ----------

----------
          YYYYYY
                 ----------

两条线，两侧，顶部和底部。 HTML5和CSS。我可以在第一个h2做到这一点，但是我不能让它适用于第二个h2。它会变得一团糟。

.container2 {
width:100%;
}

.column {
width:33.33333333%;
float:left;
}


<div class="container2" style="margin-top:200px">
<div class="column" style="border-top: 1px solid black">
    <h2><span style="font-size:0.5em;"></span></h2>
</div>
<div class="column">
    <h2><span style="font-size:1.5em;" onclick="openNavVentas()">Ventas</span></h2>
</div>
<div class="column"  style="border-bottom: 1px solid black">
    <h2><span style="font-size:0.5em;"></span></h2>
</div>

Answer 1

这样的事情应该让你开始我猜...

<style>
  .test > * { width: 32%; display: inline-block; }
  .test > hr:nth-child(1) { margin-top: -10px; margin-bottom: 10px; }
  .test > hr:nth-child(3) { margin-top: 10px; margin-bottom: -10px; }
</style>
<div class="test">
  <hr />
  <h2>XXXXXX</h2>
  <hr/>
</div>

这里的例子...... https://jsfiddle.net/rb9LsuLd/

Answer 2

我认为你需要“清除”花车。

.container2 {
  width:100%;
  clear: both;
}

https://jsfiddle.net/dwv1qqch/

Answer 3

您可以使用CSS linear-gradient作为border-image来实现此效果。

工作示例：

h2 {
text-align:center;
margin-bottom: 48px;
padding: 12px;

border: 3px solid transparent;
border-image: linear-gradient(
    to bottom right, 
    rgba(0,0,0,1) 19%,
    rgba(0,0,0,0) 20%,
    rgba(0,0,0,0) 80%,
    rgba(0,0,0,1) 81%);
border-image-slice: 1;
border-left: none;
border-right: none;
}

<h2>First Heading 2</h2>
<h2>Second Heading 2</h2>

H2侧面有两条线，底部和顶部

3 个答案: