特色填充角 css
Featured filled corner css
我正在尝试在 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所以如果你有更高效的实现方式,非常欢迎。
您的问题是您试图将伪元素放入没有高度或宽度的 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>
好的,使用 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;
}
我正在尝试在 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所以如果你有更高效的实现方式,非常欢迎。
您的问题是您试图将伪元素放入没有高度或宽度的 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>
好的,使用 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;
}