精选填充角落css

我正在尝试在Joomla中的文章的角落添加一个带有明星的三角形。精选填充角落css

这是我的代码：

的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中不是很好，所以如果你有更高效的方法来实现这一点，这是非常受欢迎的。

来源

2016-02-25 Jorge Anzola

好，使用Paulie-D的回答，做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; 
}

来源

2016-02-25 23:28:31

你的问题是，你正试图将一个伪元素放入没有高度或宽度的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>

来源

2016-02-25 22:51:14

精选填充角落css

回答

相关问题