Triangle on the bottom border of an element - html

Question

What I'm trying to do is to create a triangle on the bottom border of a block with CSS, and write some text in there like it's shown in this figure :
What I did so far, is :
Create the block element, with its its orange big bottom border.
Create the triangle using CSS.
All I need now is a way to place that triangle exactly in the middle of that exact place. I tried several ways to do that, but without any result.
Here's my code :
.content_block {
position: relative;
border: ridge;
border-width: 1px;
border-color: #969696;
background: #FFF;
}
.content_block.orange {
border-bottom: 40px solid #F59A3C;
}
.content_block > .image {
position: absolute;
display: block;
height: 110px;
width: auto;
top: 20%;
left: 15%;
}
.content_block > .text {
position: absolute;
color: #FFF;
font-weight: bold;
font-size: 12pt;
top: 105%;
left: 33%;
}
.content_block.size_3 {
height: 207px;
width: 240px;
}
.content_block.triangle {
width: 0;
height: 0;
border-style: solid;
border-width: 25px 0 0 25px;
border-color: transparent transparent transparent #FE992C;
}
<div class="content_block orange size_3">
<img src="http://upload.dinhosting.fr/c/D/B/demenage.PNG" class="image">
<div class="text">Je déménage</div>
</div>
You can notice that there's an HTML class called triangle that I don't show. I don't know how to show it exactly in that position.
EDIT :
I'm using the exact selector ( .content_block ) for showing other blocks; Like this block for instance :
So, a solution with after pseudo element will affect this block too. This is why I really need to avoid pseudo elements..

Answer 1

Edit
If you can't use a pseudo element for the triangle, you will need to add an element. You can add it as a child of the .content_block element. This uses the same approach described in the original answer :
.content_block {
position: relative;
border: ridge;
border-width: 1px;
border-color: #969696;
background: #FFF;
}
.content_block.orange {
border-bottom: 40px solid #F59A3C;
}
.content_block > .image {
position: absolute;
display: block;
height: 110px;
width: auto;
top: 20%;
left: 15%;
}
.content_block > .text {
position: absolute;
color: #FFF;
font-weight: bold;
font-size: 12pt;
top: 105%;
left: 33%;
}
.triangle {
position: absolute;
bottom: 0;
left: 50%;
border-right: 20px solid transparent;
border-bottom: 12px solid #F59A3C;
}
.content_block.size_3 {
height: 207px;
width: 240px;
}
<div class="content_block orange size_3">
<img src="http://upload.dinhosting.fr/c/D/B/demenage.PNG" class="image">
<div class="triangle"></div>
<div class="text">Je déménage</div>
</div>
Original answer:
You can make the triangle with the border technique and a pseudo element.
In the following example, I used the .content_block:after pseudo element with absolute positioning:
.content_block {
position: relative;
border: ridge;
border-width: 1px;
border-color: #969696;
background: #FFF;
}
.content_block.orange {
border-bottom: 40px solid #F59A3C;
}
.content_block > .image {
position: absolute;
display: block;
height: 110px;
width: auto;
top: 20%;
left: 15%;
}
.content_block > .text {
position: absolute;
color: #FFF;
font-weight: bold;
font-size: 12pt;
top: 105%;
left: 33%;
}
.content_block:after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
border-right: 20px solid transparent;
border-bottom: 12px solid #F59A3C;
}
.content_block.size_3 {
height: 207px;
width: 240px;
}
<div class="content_block orange size_3">
<img src="http://upload.dinhosting.fr/c/D/B/demenage.PNG" class="image">
<div class="text">Je déménage</div>
</div>

Answer 2

User :after selector and position that absolutely
Here is updated fiddle:
https://jsfiddle.net/yod8Lvjt/1/