如何在另一個內部創建徽章？

Question

我已經用另一個徽章內的徽章提取了一張圖片，我試圖弄清楚他們是如何做到的？

Answer 1

說明

爲了達到所期望的行爲，在你的包裝元素使用屬性position: relative和子元素使用position: absolute。

然後用top: 0和right: 0將子元素放置在右上角。

最後一部分將需要CSS3屬性transform和translate屬性。你可以在CSS3 2D Transforms或transform | CSS-Tricks閱讀更多關於它的信息。

我們將在這裏使用transform: translate(50%, -50%)。第一個50%意味着該元素將右移一半的自身寬度，第二個元素將意味着該元素將脫離其自身高度的一半。

如果徽章具有固定的寬度和/或高度，並且只使用固定值，則可以跳過此部分。

例

body { 
 
    margin: 25px 
 
} 
 
.outter-badge { 
 
    position: relative; 
 
    margin: 10px; 
 
} 
 
.inner-badge { 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    transform: translate(50%, -50%); 
 
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.css"> 
 

 
<div class="badge outter-badge">badge 
 
    <div class="badge inner-badge">1</div> 
 
</div> 
 

 
<div class="badge outter-badge">primary label 
 
    <div class="label label-primary inner-badge">1</div> 
 
</div> 
 

 
<div class="badge outter-badge">success label 
 
    <div class="label label-success inner-badge">1</div> 
 
</div> 
 

 
<div class="badge outter-badge">warning label 
 
    <div class="label label-warning inner-badge">1</div> 
 
</div> 
 

 
<div class="badge outter-badge">danger label 
 
    <div class="label label-danger inner-badge">1</div> 
 
</div> 
 

 
<div class="badge outter-badge">info label 
 
    <div class="label label-info inner-badge">1</div> 
 
</div>