如何用CSS這樣的樣式？

Question

HTML的

<div class="main"> 
    <span class="badge">Best Seller</span> 
</div> 

CSS-

.main{ 
    position: relative; 
    } 

    .badge{ 
    position: absolute; 
    top:0; 
    right:0; 
    background-color: #2879FE; 
    } 

誰能請告訴我什麼是做這樣的CSS最簡單的方法？

Answer 1

試試這個

.main { 
 
    position: relative; 
 
    top: 10px; right: 10px; 
 
    width: 200px; 
 
    height: 200px; 
 
    background: #ccc; 
 
} 
 
.badge { 
 
    position: absolute; 
 
    top: -10px; 
 
    right: -10px; 
 
    background-color: #2879FE; 
 
    padding: 20px; 
 
    border-radius: 10px 0 0 10px; 
 
} 
 
.badge:after { 
 
    position: absolute; 
 
    top: 100%; 
 
    right: 0; 
 
    width: 0; 
 
    height: 0; 
 
    border-bottom: 10px solid transparent; 
 
    border-left: 10px solid #2879FE; 
 
    content: ''; 
 
}

<div class="main"> 
 
    <span class="badge">Best Seller</span> 
 
</div>

Answer 2

你可以用純CSS做到這一點。我相信這被稱爲CSS ribbon

我發現了一個pen by ds729並修改它以匹配你的設計一點點，但更多。

/* Reset */ 
 

 
html, 
 
body, 
 
div, 
 
span, 
 
h1, 
 
h2, 
 
h3, 
 
h4, 
 
h5, 
 
h6, 
 
p, 
 
blockquote, 
 
pre, 
 
a, 
 
font, 
 
img, 
 
ul, 
 
li { 
 
    margin: 0; 
 
    padding: 0; 
 
    border: 0; 
 
    outline: 0; 
 
    font-size: 100%; 
 
    vertical-align: baseline; 
 
    background: transparent; 
 
} 
 

 
body { 
 
    background: #333; 
 
    color: #999; 
 
} 
 

 
h2 { 
 
    font-style: italic; 
 
    font-weight: normal; 
 
    line-height: 1.2em; 
 
} 
 

 
div#container { 
 
    margin: 50px auto 0px auto; 
 
    /* centered */ 
 
    width: 400px; 
 
} 
 

 
.bubble { 
 
    clear: both; 
 
    margin: 0px auto; 
 
    width: 350px; 
 
    background: #fff; 
 
    border-radius: 10px; 
 
    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3); 
 
    position: relative; 
 
    z-index: 90; 
 
    /* the stack order: displayed under ribbon rectangle (100) */ 
 
} 
 

 
.rectangle { 
 
    background: #2879fe; 
 
    height: 50px; 
 
    width: 30; 
 
    padding: 0 20px; 
 
    position: relative; 
 
    left: -15px; 
 
    top: -15px; 
 
    float: left; 
 
    box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.55); 
 
    z-index: 100; 
 
    border-radius: 0 20px 20px 0 
 
} 
 

 
.rectangle h2 { 
 
    font-size: 30px; 
 
    color: #fff; 
 
    padding-top: 6px; 
 
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2); 
 
    text-align: center; 
 
} 
 

 
.triangle-l { 
 
    border-color: transparent #2879fe transparent transparent; 
 
    border-style: solid; 
 
    border-width: 15px; 
 
    height: 0px; 
 
    width: 0px; 
 
    position: relative; 
 
    left: -30px; 
 
    top: 20px; 
 
    z-index: -1; 
 
    /* displayed under bubble */ 
 
} 
 

 
.info { 
 
    padding: 60px 25px 35px 25px; 
 
} 
 

 
.info h2 { 
 
    font-size: 20px; 
 
} 
 

 
.info p { 
 
    padding-top: 10px; 
 
    font-size: 14px; 
 
    line-height: 22px; 
 
} 
 

 
.info p a { 
 
    color: #c4591e; 
 
    text-decoration: none; 
 
} 
 

 
.info p a:hover { 
 
    text-decoration: underline; 
 
}

<div id="container"> 
 
    <div class="bubble"> 
 
    <div class="rectangle"> 
 
     <h2>Stack Overflow</h2> 
 
    </div> 
 
    <div class="triangle-l"></div> 
 
    <div class="info"> 
 
     <h2>Hello</h2> 
 
     <br /> 
 
     <p> 
 
     <a href="#">This is pure CSS</a> 
 
     </p> 
 
    </div> 
 
    </div> 
 
</div>