有沒有辦法讓這個功能區成爲純粹的CSS功能區？又名：我能不能添加功能區更新的類

Question

我有這個div，我添加與文字的橙色「絲帶」：更新到右上角，像這樣：

<div class='portfolio-item' > 
    <div class='ribbon-updated'> 
    <p>updated</p> 
    </div> 
</div> 

基本上.portfolio -Item有CSS（與其他一些CSS無關這裏一起）：

position: relative 
overflow: hidden 

而對於CSS .ribbon更新的

.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更新？我可以在div.portfolio-item中添加一個像'ribbon'這樣的CSS類來給它一個絲帶嗎？

Answer 1

確定它可能只使用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。