元素底部边框上的三角形

Question

我想做的是用 CSS 在块的底部边框上创建一个三角形，然后在其中写一些文本，如图所示：

到目前为止我所做的是：

创建带有橙色大底边框的块元素。
使用 CSS 创建三角形。

我现在需要的是一种方法，可以将该三角形准确地放置在该确切位置的中间。我尝试了几种方法来做到这一点，但没有任何结果。

这是我的 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>

你可以注意到有一个 HTML class 叫做三角形，我没有显示。我不知道如何准确地显示在那个位置。

编辑：我正在使用精确的选择器（ .content_block ）来显示其他块；例如这个块：

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

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 technique 和一个伪元素来制作三角形。

在下面的例子中，我使用了绝对定位的.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>

Answer 2

用户 :after 选择器和 absolutely 的位置这里更新了fiddle： https://jsfiddle.net/yod8Lvjt/1/

元素底部边框上的三角形

Triangle on the bottom border of an element

html

css

css-shapes

编辑

原回答：