特色填充角 css

Question

我正在尝试在 Joomla 文章的一角添加一个带有星号的三角形。

这是我的代码：

Html

<div class="ribbon-wrapper-featured">
  <div class="ribbon-featured">
    <i class="fa fa-star"></i>
  </div>
</div>

Css

/*corner ribbon*/
.ribbon-wrapper-featured {
    width: 50px;
    height: 50px;
    position: absolute;
    top: 0px;
    right: 0px;
}

.ribbon-featured {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 50px 50px 0;
    border-color: transparent #f1c40f transparent transparent;
    line-height: 0px;
    _border-color: #000000 #f1c40f #000000 #000000;
    _filter: progid:DXImageTransform.Microsoft.Chroma(color='#000000');
}

但这就是我得到的

我不是很擅长CSS所以如果你有更高效的实现方式，非常欢迎。

Answer 1

您的问题是您试图将伪元素放入没有高度或宽度的 div 中...所以它不适合。

如果你放置两个伪元素，第一个是 Font Awesome ::before 第二个是三角形背景，我认为你可以获得更多控制。

您可以更换图标，根据自己的喜好为其着色，并且您还可以独立于其他所有内容控制背景。

像这样：

.featured.fa {
  width: 100px;
  height: 100px;
  margin: 2em auto;
  border: 1px solid grey;
  display: block; /* needed to override FA styling */
  position: relative;
}
.featured.fa::before {
  position: absolute;
  right: 0%;
  top: 0;
  margin: .25em;
  color: gold;
}
.featured::after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  top: 0;
  right: 0;
  border-width: 20px;
  border-style: solid;
  border-color: darkorange darkorange transparent transparent;
  z-index: -1;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />

<div class="featured fa fa-star"></div>

Answer 2

好的，使用 Paulie-D's answer (Thanks!) and doing this。（因为复制粘贴答案无效）

HTML

<div class="ribbon-wrapper-featured"><div class="featured fa fa-star"></div></div>

CSS

/*corner ribbon*/
.ribbon-wrapper-featured {
    position: absolute;
    top: -50px;
    right: 0px;
}

.featured.fa {
    width: 100px;
    height: 100px;
    display: block;
    position: absolute;
    top: 20px;
    right: -30px;
}
.featured.fa::before {
    position: absolute;
    right: 0%;
    top: 0;
    margin: .25em;
    color: gold;
    z-index: 2;
}
.featured::after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    top: 0;
    right: 0;
    border-width: 20px;
    border-style: solid;
    border-color: darkorange darkorange transparent transparent;
    z-index: 1;
}

特色填充角 css

Featured filled corner css

html

css

joomla

font-awesome