精选填满的角落CSS [英] Featured filled corner css

问题描述

这是我的代码：

$

我试图在Joomla的一篇文章的角落添加一个带有明星的三角形。 b
$ b

Html

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

Css

  / *角丝带* / 
 .ribbon-wrapper-featured {
 width：50px; 
 height：50px; 
位置：绝对; 
 top：0px; 
 right：0px; 
} 
 
 .ribbon-featured {
 width：0; 
 height：0; 
 border-style：solid; 
 border-width：0 50px 50px 0; 
 border-color：透明＃f1c40f透明透明; 
 line-height：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 {
 position：absolute; 
 top：-50px; 
 right：0px; 
} 
 
 .featured.fa {
 width：100px; 
 height：100px; 
 display：block; 
位置：绝对; 
 top：20px; 
正确：-30px; 
} 
 .featured.fa :: before {
 position：absolute; 
正确：0％; 
 top：0; 
保证金：.25em; 
颜色：金色; 
 z-index：2; 
} 
 .featured :: after {
 content：''; 
位置：绝对; 
 width：0; 
 height：0; 
 top：0; 
 right：0; 
 border-width：20px; 
 border-style：solid; 
边框颜色：darkorange darkorange透明透明; 
 z-index：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屋！