我正在尝试围绕一个完整的圆圈创建一个半拱形,如下所示。我将如何在 css 中创建它?到目前为止,我只创建了圆圈,但不知道如何制作拱门。
.circle {
width: 45px;
height: 45px;
border-radius: 50%;
font-size: 20px;
color: #fff;
line-height: 45px;
text-align: center;
position: relative;
background: #BDBDBD;
}
<div class="circle">1</div>
最佳答案
您可以使用:after
伪元素来创建半圆。您还需要使用 bottom-right
和 top-right
border-radius。
.circle {
width: 100px;
height: 100px;
margin: 50px;
position: relative;
line-height: 100px;
text-align: center;
border-radius: 50%;
background: #BDBDBD;
color: white;
}
.circle:after {
content: '';
position: absolute;
top: 0;
right: 0;
border: 10px solid gray;
border-left: 0;
border-bottom-right-radius: 100px;
border-top-right-radius: 100px;
width: 55px;
height: calc(100% + 10px);
transform: translate(15px, -15px);
}
<div class="circle">1</div>
关于CSS 半拱围绕全圆,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44472926/