用 css 绘制延伸全出血的线条

Question

所以我一直是一名开发人员，并且非常精通 CSS 和编码样式。有一个新的设计已经获得批准，并试图找出实现这一目标的最佳方法。这是我试图通过绘制边框和线条实现的屏幕截图，但它们需要向左和向下延伸：

https://cdn2.hubspot.net/hubfs/2323601/Epsilon_April2017/Images/Screen%20Shot%202017-05-02%20at%209.19.29%20AM.png

有人对如何使用 HTML/CSS 实现这一点有任何见解吗？显然，在平板电脑和移动设备上，它会被删除，但在台式机上，他们想实现这一点。我不想做扁平化的图像，但这是我现在唯一的倾向。

我尝试将线条创建为图像，我将其放在左侧文本下方

Answer 1

只玩CSS

body{
  background: black;
  margin: 0;
}
.div{
  position: relative;
  width: 80%;
  background: grey;
  display: table;
  margin-top: 50px;
}
.a,
.b{
  display: table-cell;
  color: white;
}
.a{
  text-align: right;
  font-size: 1.2em;
  padding: 15px;
  border-bottom: 2px solid white;
}
.b{
  width: 140px;
}
.b div{
  position: absolute;
  background: pink;
  font-size: 1em;
  bottom: 0;
  border: 2px solid white;
  padding: 8px;
}
strong{
  display: block;
  width: 150px;
  float: right;
}
.b div:before{
  content: "";
  display: block;
  position: absolute;
  width: 2px;
  height: 50px;
  background: white;
  top: 100%;
  left: -2px;
}

<div class="div">
  <div class="a">OUR INDUSTRY-LEADING <br><STRONG>EXPERTS ARE READY TO</STRONG></div>
  <div class="b"><div>GROW YOUR BUSSINES</div></div>
</div>

用 css 绘制延伸全出血的线条

Draw lines with css that extend full bleed

css

lines