选择器后的 CSS 作为图像上的钳位效果

Question

我尝试在 CSS 中创建一个“钳位效果”。

看图: https://s27.postimg.org/j6m72z5kj/h_transylvania.png

我不知道这个效应具体是怎么命名的，所以就叫他“钳位效应”。

有人能告诉我为什么 ::after 不起作用吗？(可以产生“钳位效应” - 请参阅图片链接)。

我的代码:

h2 {
  margin-top: 40px;
}
.container {
  background-color: #fff;
  width: 250px;
  height: auto;
  padding: 20px;
}
img.mypicture {
  width: 230px;
}
.recomandded {
position: absolute;
display: inline-block;
top: 125px;
left: 1px;
color: #fff;
background-color: #ff0047;
font-size: 13px;
font-weight: 700;
font-family: Lato,Arial,sans-serif;
padding: 3px 16px 3px 6px;
border-radius: 4px 0 0 4px;
box-shadow: 1px 2px 2px 0 rgba(0,0,0,0.4);
}
.recomandded::after {
content: "";
display: inline-block;
border: 6px solid #dd0843;
border-bottom-color: transparent;
border-right-color: transparent;
position: absolute;
top: 29px;
left: 0;
}

<div class="container">
<h2>Beautiful Flower</h2>
<img class="mypicture" src="https://upload.wikimedia.org/wikipedia/commons/f/fe/Frangipani_flowers.jpg" />
<div class="recomandded">RECOMMENDED</div>
</div>

Answer 1

仅当绝对元素处于非静态默认位置时，它才会与其父元素相关，因此在示例中，我向容器添加了 position: relative。

我还修复了所需的定义以匹配提供的示例图像。

这是固定的 CSS:

h2 {
  margin-top: 40px;
}
.container {
  position: relative;
  background-color: #fff;
  width: 250px;
  height: auto;
  padding: 20px;
}
img.mypicture {
  width: 230px;
}
.recomandded {
position: absolute;
display: inline-block;
top: 125px;
left: 8px;
color: #fff;
background-color: #ff0047;
font-size: 13px;
font-weight: 700;
font-family: Lato,Arial,sans-serif;
padding: 3px 16px 3px 6px;
border-radius: 4px 0 0 4px;
box-shadow: 1px 2px 2px 0 rgba(0,0,0,0.4);
}
.recomandded::after {
content: "";
display: inline-block;
border: 6px solid #dd0843;
border-bottom-color: transparent;
border-left-color: transparent;
position: absolute;
top: 20px;
left: 0;
}

或者给自己一个fiddle example

希望对你有帮助