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!
+3
Tiago
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
vsync
source
to share
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
4dgaurav
source
to share
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
Kheema pandey
source
to share
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
Pieter VDE
source
to share