如何用css制作这种双线形状？

Question

是否可以使用CSS制作橙色双垂直线形状？ （见下图）。这是我网站上的推荐部分，必须与文本一起垂直扩展。

非常感谢！

Answer 1

<强> Demo

CSS

#trapezoid {
    border-bottom: 15px solid transparent;
    border-right: 15px double orange;
    min-height: 50px;
    width: 0;
}
span {
    font-family: calibri;
    font-size: 28px;
    font-weight: bold;
    margin-left: 20px;
    height: 50px;
    width: 500px;
    display: block;
    color: blue;
}

Answer 2

这个例子是最好的例子，它们有什么背景或者页面有什么关系。它自动扩展。尝试在游乐场演示页面中编写文本并查看！

Playground page

HTML

<div class='striped'>
  <p contenteditable>
    Is it possible to make that orange double vertical line shape with CSS? 
    (see image bellow). This is for a testimonials section on my site that has 
    to expand vertically along with the text. try editing this test and watch!
  </p>
</div>

SCSS CSS

.striped{ 
  font-size:20px; 
  padding:0 0 10px 3.5em; 
  width:350px; 
  position:relative;
}

.striped::before{
    content:'';
    position:absolute;
    left:10px; top:0; bottom:0;
    border-right:26px double orange;
    border-bottom:26px solid transparent;
}

Answer 3

这可以使用after和:before伪元素来实现。但是这个例子不像发布图像那样准确，但这是一种方法。查看 DEMO 。

h1{
border-left:5px solid gold; 
padding:15px;
position:relative;
height:auto;
border-bottom:5px solid transparent;
}

h1:after{
  content:"";
  position:absolute;
  top:0;
  left:6px;
  border-left:5px solid gold; 
  padding:15px;
  height:30%;
  border-bottom:5px solid transparent;
}

Answer 4

这样的东西？

JSFiddle

div#one {
    height: 100px;
    margin-right: 5px;
    border-right: 10px solid orange;
    border-bottom: 10px solid transparent;
}
div#two {
    height: 150px;
    border-right: 10px solid orange;
    border-bottom: 10px solid transparent;
}
div {
    width: 10px;
    float: left; /* To make them appear next to each other */
}