Clever Geek Handbook

How do I make this double line using css?

Is it possible to make this orange double vertical line with CSS? (see figure below). This is for a testimonial section on my site that needs to expand vertically along with the text.

Many thanks!

enter image description here

+3


source to share


4 answers


This example is the best, no matter what background they have or on the page. it expands automatically. try writing some text on the playground demo page and see!

Playground

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


source


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


source


This can be achieved using pseudo-elements after

and :before

. However, this example is not as accurate as the posted image, but here is the way. Check out 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;
}
+1


source


Something like that?

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 */
}
0


source






More articles:


All Articles