围绕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添加圆形

回答

相关问题