边框 - 左边有一条水平线

Question

我试图在左边做一个边界,连接右边的水平线.我将展示它应该是什么样子的草图,我需要有关如何使它变得简单的想法:

感谢许多好的解决方案,下面的解决方案运行良好.

有没有一种简单的方法可以在左边的渐变上创建边框,还有水平线？还有如何填补这些空白？我想制作一个时间表..

Answer 1

看起来像hr重新设计的标签对我有用,

a 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