CODEWITHSUNDEEP
cssshapescss-shapes
Nesta
Nesta

Reputation: 1008

How to make this double line shape with css?

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!

enter image description here

Upvotes: 3

Views: 1217

Answers (4)

vsync
vsync

Reputation: 130264

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

Upvotes: 2

Kheema Pandey
Kheema Pandey

Reputation: 10265

This can be achieve using after and :before pseudo element. However this example is not accurate as posted image but here is a way. Check the 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;
}

Upvotes: 1

4dgaurav
4dgaurav

Reputation: 11496

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

Upvotes: 4

Pieter VDE
Pieter VDE

Reputation: 2235

Something like this?

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

Upvotes: 0

Related Questions