边框 - 左边有一条水平线

Question

我正在尝试在左侧创建一个连接右侧水平线的边框。我将展示它应该是什么样子的草图，我需要有关如何使它变得简单的想法：

感谢许多好的解决方案，下面的解决方案运行良好。

是否有一种简单的方法可以将左边框的边框与水平线一起制作？还有如何填补这些空白？我想制作一个时间表..

Answer 1

看起来像hr标签重新设计用于我，

border-left和背景渐变可以伪造此形状。您可以使用calc()设置中间行的height。

hr {
  border:none;
  height:100px;
  border-left: solid 20px #DC5969;
  background:linear-gradient(to top, transparent calc(50% - 1px), #DC5969 calc(50% - 1px), #DC5969 calc(50% + 1px), transparent calc(50% + 1px));/* makes a 2px height line */
    }
html {
  min-height:100%;
  background:linear-gradient(to bottom left, lightgray,turquoise); /* demo purpose, show transparency */
  }

<hr/>

编辑：问题已更新，但仍缺少代码：）

hr {
  flex: 1 1 30%;
  width: auto;
  border: none;
  height: 100px;
  border-left: solid 20px #DC5969;
  background: linear-gradient(to top, transparent calc(50% - 1px), #DC5969 calc(50% - 1px), #DC5969 calc(50% + 1px), transparent calc(50% + 1px));
  /* makes a 2px height line */
}

div {
  margin: 0 auto auto;
  text-align: center;
  color: gray;
}

body {
  margin: auto;
}

section {
  display: table;
  display: flex;
}

<section>
  <hr/>
  <div>
    <h1>HTML Ipsum Presents</h1>
    <h2>Header Level 2</h2>
    <p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em>      Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci,
      sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
  </div>
</section>
<section>
  <hr/>
  <div>
    <h1>HTML Ipsum Presents</h1>
    <h2>Header Level 2</h2>
    <p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas.</p>
  </div>
</section>
<section>
  <hr/>
  <div>
    <h1>HTML Ipsum Presents</h1>
    <h2>Header Level 2</h2>
    <p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. ornare sit amet,
      wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
  </div>
</section>

您可以将课程添加到hr或使用nth-child更改颜色示例：http://codepen.io/gc-nomade/pen/ZWPQed

Answer 2

如果您想在单个HTML节点中使用它：

<style>
.you-name-it {
  position: relative;
  width: 100%;
  height: 2em;
  border-bottom: 2px solid red;
}

.you-name-it:before {
  display: block;
  content: "";
  width: 1em;
  height: 200%;
  background-color: red;
}
</style>

// ...

<div class="you-name-it"></div>

小提琴：https://jsfiddle.net/odwgL86x/

Answer 3

看起来另外两个<divs>可能是您最好的选择。只是搞乱辅助div height的大小和margins的宽度

以下是我快速拼凑的内容：https://jsfiddle.net/fsqu1dp7/

Answer 4

您可以使用伪元素:before或:after执行此操作。

工作示例：https://jsfiddle.net/fu4yjvjz/

Answer 5

请参阅以下代码

<div class="outer">
  <div class="inner">

  </div>
</div>

样式声明如下。

.outer{
  border-left:20px solid;
  height:200px;
}

.inner{
   border-bottom:3px solid;
   height:100px;
}