How to create div with pseudo elements directly on top & under? - html

Question

I'm trying to create a div with a triangle on top & a triangle under it..
the div should be responsive in size, so not a fixed width
not a fixed height either
Already experimented with borders only but they don't seem to give me that flexible width I want..
So where I'm at:
I'm using pseudo elements to place svgs I made of the shape!
Problem is, I'm not sure how to place them properly.. feels so strange to have to set 100% from top to place the bottom one & the other way (but as you can see there is a line in between etc)..
Here's the fiddle:
https://jsfiddle.net/benvanlooy/c4vqb1ay/
.box {
position: relative;
display: inline-block;
width: 40%;
background-color: #D01417;
margin-top: 200px;
margin-bottom: 200px;
padding: 30px;
}
.box::before {
content: url('http://www.benvanlooy.be/fiddle/box-triangle-top-red-new-01.svg');
position: absolute;
width: 100%;
left: 0px;
bottom: 100%;
}
.box::after {
content: url('http://www.benvanlooy.be/fiddle/box-triangle-bottom-red-new-01.svg');
position: absolute;
width: 100%;
left: 0px;
bottom: 0px;
top: 100%;
}
<div class="box">
this is some content
<BR/> this
<br/> box
<br/> has
<br/> a <br/> variable
<br/> height
</div>
Has anyone got any experience with something like this? :-)
The answer is probably easy, so I'm feeling rather stupid :/
Any help would be much appreciated!

Answer 1

You can use gradient and no need for complex code and extra SVG:
.box {
position: relative;
display: inline-block;
width: 40%;
background:
linear-gradient(to top right,#D01417 49.5%,transparent 50%) top right/50.2% 200px,
linear-gradient(to top left,#D01417 49.5%,transparent 50%) top left/50.2% 200px,
linear-gradient(to bottom right,#D01417 49.5%,transparent 50%) bottom right/50.2% 200px,
linear-gradient(to bottom left,#D01417 49.5%,transparent 50%) bottom left/50.2% 200px,
linear-gradient(#D01417,#D01417) center/100% calc(100% - 400px);
background-repeat:no-repeat;
padding: 200px 30px;
}
<div class="box">
this is some content
<br> this
<br> box
<br> has
<br> a <br> variable
<br> height
</div>

Answer 2

This creates visual triangles without any images (using borders only):
.box {
position: relative;
display: inline-block;
width: 40%;
background-color: #D01417;
margin-top: 200px;
margin-bottom: 200px;
padding: 30px;
}
.box::before {
content: "";
display: block;
position: absolute;
left: 50%;
top: -40px;
transform: translateX(-50%);
border-width: 22px;
border-color: transparent transparent #D01417 transparent;
border-style: solid;
}
.box::after {
content: "";
display: block;
position: absolute;
left: 50%;
bottom: -40px;
transform: translateX(-50%);
border-width: 22px;
border-color: #D01417 transparent transparent transparent;
border-style: solid;
}
<div class="box">
this is some content
<BR/> this
<br/> box
<br/> has
<br/> a <br/> variable
<br/> height
</div>

Answer 3

You can remove a 4 px line by using calc like this:
.box::before {
bottom: calc(100% - 4px);
}
https://jsfiddle.net/c4vqb1ay/33/
or
https://jsfiddle.net/c4vqb1ay/36/

Answer 4

Another option would be to clip the actual div's shape, without using pseudo elements or SVGs. For example:
div {
background-color: #D01417;
width: 40%;
clip-path: polygon(0 3em,
50% 0,
100% 3em,
100% calc(100% - 3em),
50% 100%,
0 calc(100% - 3em)
);
padding: 4em 1em;
}
html * {
box-sizing: border-box;
}
<div>
this is some content<BR/>
this<br/>
box<br/>
has<br/>
a <br/>
variable<br/>
height
</div>
Browser support for clip-path: https://caniuse.com/#feat=css-clip-path
(works in most current browsers except Edge, if you add a -webkit- prefix)
The polygon is drawn by simply defining it's points:
translates to CSS shape as:
0 3em,
50% 0,
100% 3em,
100% calc(100% - 3em),
50% 100%,
0 calc(100% - 3em)
(starting at top left, but it doesn't really matter)
If you ever decide to go for more complex shapes, this tool is quite useful: https://bennettfeely.com/clippy/