Triangle on the bottom border of an element

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..

It doesn't work. EDIT: I will see see that now. – Mathemagician Jan 18 '16 at 14:08 — Mathemagician, Jan 18 '16 at 14:08
You also need to add
in your html. – Kami Jan 18 '16 at 14:12 — Kami, Jan 18 '16 at 14:12

score 6 · Accepted Answer · edited May 23 '17 at 12:15

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>

What happens if I'm already using the after pseudo element for something else ? (Something that I was planning to do). Is it the only way of doing that ? — Mathemagician, Jan 18 '16 at 13:58
@Humoussama if you aren't using the before pseudo element, you can use that one instead. — web-tiki, Jan 18 '16 at 13:59
Yes I know. But is there any other solution that don't use the pseudo elements ? I would like to keep the pseudo elements for some special effects. — Mathemagician, Jan 18 '16 at 14:01
@Humoussama ok, you can also use the pseudo elements of the `.text` element but if they are also used, you will need to add another element (child of `.content_block`) to make the triangle. — web-tiki, Jan 18 '16 at 14:03
Still, like I told you, there's a problem, that I will explain more by editing my post. — Mathemagician, Jan 18 '16 at 14:10
I edited my post. You can see the problem that I will have for instance by doing that with pseudo elements — Mathemagician, Jan 18 '16 at 14:20
@Humoussama I edited the answer using a sperate element for the triangle. — web-tiki, Jan 18 '16 at 14:24

score 1 · Answer 2 · answered Jan 18 '16 at 13:53

1

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

answered Jan 18 '16 at 13:53

Saqib Amin

1,171
7
16

Triangle on the bottom border of an element

2 Answers2

Edit

Original answer: