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

【问题标题】：How to make this double line shape with css?如何用css制作这种双线形状？
【发布时间】：2014-09-11 23:00:09
【问题描述】：

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

非常感谢！

【问题讨论】：

这很容易。给我一分钟..
jsbin.com/samirine/2/edit查看此链接。
@KheemaPandey Pandey - 不够好。它们没有对齐。

标签： css shape css-shapes

【解决方案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;
}

【讨论】：

很酷，但是当我输入更多文本时它不会展开
将跨度的宽度从500px更改为1000px之类甚至100%，您还可以更改梯形的高度和跨度

【解决方案2】：

这个例子是最好的例子，不管他们有什么背景，或者页面有什么。它会自动扩展。尝试在 Playground 演示页面中编写文本并查看！

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;
}

【讨论】：

谢谢看起来很棒，但我似乎无法让它在我身边工作。我使用的是普通的 css 文件，因此您的 SCSS 可能不兼容或其他原因，或者我只是在说一些愚蠢的事情，因为我对 SCSS 不太了解。
@Tiago - 你可以使用 google 将 SCSS 转换为 CSS。我可以用 CSS 给你写一个例子，等等。
@Tiago - 5 分钟前完成，检查上面的编辑。也看看操场游戏

【解决方案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;
}

【讨论】：

谢谢，但是第二行应该比第一行高，这样可以吗？

【解决方案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 */
}

【讨论】：