CSS-仅角标

Question

我想为一些图像显示一个 角徽章（徽章将是一个 FontAwesome 图标）。

HTML 布局是固定的，所以我不能 add/edit 元素。我只能以编程方式将 class 添加到父 div 元素...

布局是这样的：

<div class="editor-choice">
  <a href="#" data-caption="">
    <img src="https://photographycourse.net/wp-content/uploads/2014/11/Landscape-Photography-steps.jpg" alt="" width="650" />
  </a>
</div>

和创建角的CSS是这样的：

body {
  margin: 0;
  padding: 0;
}
.editor-choice {
  position: relative;
  margin: 0 auto;
  width: 650px;
}
.editor-choice::before,
.editor-choice::after {
  position: absolute;
  content: '';
  top: 0;
  right: 0;
  border-color: transparent;
  border-style: solid;
  z-index: 1;
}
.editor-choice::after {
  border-width: 45px;
  border-top-color: rgba(250, 166, 28, 0.8);
  border-right-color: rgba(250, 166, 28, 0.8);
}

问题是我无法显示 badge 部分（fa-diamond 图标）...它必须是 CSS-only 解决方案以相对于 .editor-choice class 的元素形式，如：

.editor-choice img::after {
  content: "\f219";
  font-family: FontAwesome;
  transform: rotate(45deg);
  font-size: 18px;
  color: #fff;
}

或类似的东西...

任何帮助将不胜感激！ TIA

Answer 1

不要为徽章背景使用 before 和 after 伪元素，而是只使用一个，然后将另一个用于 ICON，而不是为图标使用 img/s 伪元素。此外，我将图像的 z-index 更改为 -1，将 ICON 更改为 1。

body {
  margin: 0;
  padding: 0;
}
.editor-choice {
  position: relative;
  margin: 0 auto;
  width: 650px;
  z-index: -1;
}

.editor-choice::after {  position: absolute;
  content: '';
  top: 0;
  right: 0;
  border: 45px solid transparent;
  border-top-color: rgba(250, 166, 28, 0.8);
  border-right-color: rgba(250, 166, 28, 0.8);
}

.editor-choice::before {
  content: "\F219";
  font-family: 'Font Awesome\ 5 Free';
  transform: rotate(45deg);
  font-size: 18px;
  color: #fff;
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 1;
}

CSS-仅角标

CSS-only corner badge

css

css-position