特色填充角 css [英] Featured filled corner css

问题描述

我正在尝试在 Joomla 中一篇文章的角落添加一个带有星星的三角形.

这是我的代码:

HTML

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

CSS

/*角带*/.ribbon-wrapper-featured {宽度:50px；高度:50px；位置:绝对；顶部:0px；右:0px；}.ribbon 特色 {宽度:0；高度:0；边框样式:实心；边框宽度:0 50px 50px 0；边框颜色:透明 #f1c40f 透明透明；行高:0px；_border-color: #000000 #f1c40f #000000 #000000;_filter: progid:DXImageTransform.Microsoft.Chroma(color='#000000');}

但这就是我得到的

我不太擅长 CSS，所以如果你有更有效的方法来实现这一点，非常欢迎.

解决方案

好的，使用 Paulie-D 的回答(谢谢！)并做 这个.(因为复制粘贴答案不起作用)

HTML

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

CSS

/*角带*/.ribbon-wrapper-featured {位置:绝对；顶部:-50px；右:0px；}.featured.fa {宽度:100px；高度:100px；显示:块；位置:绝对；顶部:20px；右:-30px；}.featured.fa::before {位置:绝对；右:0%；顶部:0；边距:0.25em；颜色:金色；z-索引:2；}.featured::after {内容: '';位置:绝对；宽度:0；高度:0；顶部:0；右:0；边框宽度:20px；边框样式:实心；边框颜色:暗橙色 暗橙色 透明 透明；z-索引:1；}

I'm trying to add a triangle with a star in it at the corner of an article in Joomla.

This is my code:

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');
}

But this is what I'm getting

I'm not very good in CSS so if you have a more efficient way to achieve this, it is very welcome.

解决方案

Ok, using Paulie-D's answer (Thanks!) and doing this. (Because copy-paste the answer didn't work)

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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！