如何在另一个内部创建徽章？

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>