元素底部边框上的三角形

Question

我要做的是在CSS的底部边框上创建一个带有CSS的三角形，然后在其中写一些文字，如图所示：

到目前为止我做的是：

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

我现在需要的是将三角形恰好放在那个确切位置中间的方法。我尝试了几种方法，但没有任何结果。

这是我的code：

＆＃13;
＆＃13;
.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;
}
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;

您可以注意到我没有显示的称为三角形的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 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的位置 这是更新的小提琴： https://jsfiddle.net/yod8Lvjt/1/