我在这个 div 中添加了一条橙色“丝带”,并在右上角添加了文本:UPDATED,如下所示:
<div class='portfolio-item' >
<div class='ribbon-updated'>
<p>updated</p>
</div>
</div>
基本上 .portfolio-item 具有 css(以及一些与此处不相关的其他 css):
position: relative
overflow: hidden
以及 .ribbon-updated 的 css
.ribbon-updated
position: absolute
background-color: $orange-medium
transform: rotate(45deg)
padding: 5px 10px
top: 15px
right: -35px
left: auto
width: 130px
p
color: $white
margin-bottom: 0
text-transform: uppercase
letter-spacing: 1px
font-weight: 600
text-align: center
但是有没有办法通过不添加全新的 div.ribbon-updated 来做到这一点?我可以向 div.portfolio-item 添加一个像“ribbon”这样的 css 类来给它一个丝带吗?
最佳答案
当然,仅使用 CSS,使用伪类 before
或 after
即可。
您甚至可以从 html 属性读取功能区文本值:
.portfolio-item {
width: 200px;
height: 300px;
background: #ddd;
position: relative;
overflow: hidden;
float: left;
margin: 10px;
}
.portfolio-item[data-ribbon]::before {
content: attr(data-ribbon);
position: absolute;
background-color: orange;
transform: rotate(45deg);
line-height: 32px;
padding: 0 10px;
top: 24px;
right: -35px;
width: 130px;
color: white;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 600;
text-align: center;
}
<div class='portfolio-item' data-ribbon="updated">
</div>
<div class='portfolio-item' data-ribbon="custom">
</div>
<div class='portfolio-item' data-ribbon="new">
</div>
可以找到浏览器对 CSS 生成内容的支持 here .
关于html - 有没有办法让这个ribbon成为纯css的ribbon?又名 : can I just add a ribbon-updated class,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46479525/