圍繞div添加圓形

我有這個div，看起來像一個大方塊，但我想在div的頂部（保持樣式）添加一個小圓圈，裏面有一個圖標（我的意思是Font Awesome）所以人們會知道它是什麼類別的內容。圍繞div添加圓形

我該怎麼做，使用CSS？

謝謝

.le_quiz { 
 
    position: relative; 
 
    width: 350px; 
 
    background-color: white; 
 
    height: 400px; 
 
    margin-top: 45px; 
 
    border-bottom: 1px solid lightgrey; 
 
    box-shadow: 0px 2px #40c8d6; 
 
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.01), 0 2px 5px 0 rgba(0, 0, 0, 0.19); 
 
} 
 

 
.le_quiz .post-title { 
 
    position: absolute; 
 
    top: 60%; 
 
    left: 2%; 
 
    font-size: 22px; 
 
    color: #404040; 
 
} 
 

 
.le_quiz .postbody { 
 
    margin-top: 40px; 
 
    font-size: 22px; 
 
} 
 

 
.le_quiz .postbody a:visited { 
 
    margin-top: 40px; 
 
    font-size: 22px; 
 
    color:#404040; 
 
} 
 
.le_quiz .cta { 
 
    position: absolute; 
 
    top: 90%; 
 
    left: 15px; 
 
    font-weight: bold; 
 
    font-size: 14px; 
 
    color:#38C8D6; 
 
} 
 
.le_quiz .cta:visited { 
 
    color:#38C8D6; 
 
}

<div class="le_quiz"> 
 
</div>

這是我想什麼：Circle

來源

2017-05-11 Francis

可以顯示一個例子或畫的你試圖做什麼畫面？你指的是什麼字體真棒圖標？ –

哎呀對不起@MichaelCoker – Francis

@MichaelCoker對不起，我忘了，有什麼方法可以在圓圈內添加一個圖標並定位它？ – Francis

你可以使用2個僞元素。一個將圓放在頂部，另一個覆蓋圓的底部。

.le_quiz { 
 
    position: relative; 
 
    width: 350px; 
 
    background-color: white; 
 
    height: 400px; 
 
    margin-top: 60px; 
 
    border-bottom: 1px solid lightgrey; 
 
    box-shadow: 0px 2px #40c8d6; 
 
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.01), 0 2px 5px 0 rgba(0, 0, 0, 0.19); 
 
} 
 

 
.le_quiz .post-title { 
 
    position: absolute; 
 
    top: 60%; 
 
    left: 2%; 
 
    font-size: 22px; 
 
    color: #404040; 
 
} 
 

 
.le_quiz .postbody { 
 
    margin-top: 40px; 
 
    font-size: 22px; 
 
} 
 

 
.le_quiz .postbody a:visited { 
 
    margin-top: 40px; 
 
    font-size: 22px; 
 
    color:#404040; 
 
} 
 
.le_quiz .cta { 
 
    position: absolute; 
 
    top: 90%; 
 
    left: 15px; 
 
    font-weight: bold; 
 
    font-size: 14px; 
 
    color:#38C8D6; 
 
} 
 
.le_quiz .cta:visited { 
 
    color:#38C8D6; 
 
} 
 

 
.le_quiz:before, .le_quiz:after { 
 
    content: ''; 
 
    position: absolute; 
 
    background: #fff; 
 
    top: 0; 
 
} 
 

 
.le_quiz:before { 
 
    left: 0; 
 
    right: 0; 
 
    height: 60px; 
 
    z-index: 2; 
 
} 
 

 
.le_quiz:after { 
 
    left: 50%; 
 
    transform: translate(-50%,-50%); 
 
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.01), 0 2px 5px 0 rgba(0, 0, 0, 0.19); 
 
    z-index: 1; 
 
    width: 100px; 
 
    height: 100px; 
 
    border-radius: 50%; 
 
}

<div class="le_quiz"> 
 
</div>

來源

2017-05-11 02:11:08

謝謝@Michael Coker !!! – Francis

@Francis不用客氣。那很有趣:) –

@MichaelCoker好工作 –

您可以添加其他的div和設置畦半徑至50％，使之成爲圈。

.le_quiz, .circle { 
 
    position: relative; 
 
    width: 350px; 
 
    background-color: white; 
 
    height: 400px; 
 
    margin-top: 45px; 
 
    border-bottom: 1px solid lightgrey; 
 
    box-shadow: 0px 2px #40c8d6; 
 
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.01), 0 2px 5px 0 rgba(0, 0, 0, 0.19); 
 
} 
 

 
.le_quiz .post-title { 
 
    position: absolute; 
 
    top: 60%; 
 
    left: 2%; 
 
    font-size: 22px; 
 
    color: #404040; 
 
} 
 

 
.le_quiz .postbody { 
 
    margin-top: 40px; 
 
    font-size: 22px; 
 
} 
 

 
.le_quiz .postbody a:visited { 
 
    margin-top: 40px; 
 
    font-size: 22px; 
 
    color:#404040; 
 
} 
 
.le_quiz .cta { 
 
    position: absolute; 
 
    top: 90%; 
 
    left: 15px; 
 
    font-weight: bold; 
 
    font-size: 14px; 
 
    color:#38C8D6; 
 
} 
 
.le_quiz .cta:visited { 
 
    color:#38C8D6; 
 
} 
 
.circle { 
 
    width:100px; 
 
    height:100px; 
 
    border-radius:50%; 
 
    top: 100px; 
 
    left: 120px; 
 
}

<div class="circle"></div> 
 
<div class="le_quiz"> 
 
</div>

來源

2017-05-11 02:10:30

非常感謝@KrisRoofe！有沒有辦法讓它看起來像沒有陰影，所以我們認爲它是同一個div？ – Francis

圍繞div添加圓形

回答

相關問題