精選填充角落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

回答

相關問題