How to make this double line shape with css?

Question

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.

Many thanks!

Answer 1

This example is the best one, it doesn't matter what background they have, or the page has. it auto-expands. try to write text in the playground demo page and see!

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