元素底部边框上的三角形

Question

我要做的是在CSS的底部边框上用CSS创建一个三角形,并在其中写一些文字,如下图所示:

到目前为止我所做的是:

1. 创建块元素,其橙色大底边框.
2. 使用CSS创建三角形.

我现在需要的只是将三角形正好放在那个确切位置的中间.我尝试了几种方法来做到这一点,但没有任何结果.

这是我的代码:

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

您可以注意到,我没有显示一个名为triangle的HTML类.我不知道如何在那个位置准确显示它.

编辑:我正在使用确切的选择器(.content_block)来显示其他块; 比如这个块例如:

因此,具有after伪元素的解决方案也会影响此块.这就是为什么我真的需要避免伪元素..

Answer 1

编辑

如果不能对三角形使用伪元素,则需要添加元素.您可以将其添加为.content_block元素的子元素.这使用了原始答案中描述的相同方法:

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

原始答案:

您可以使用border技术和伪元素制作三角形.

在下面的示例中,我使用了.content_block:after具有绝对定位的伪元素:

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