我正在尝试创建一个元素,它是一个带有完整圆形边框的半圆。像这样:
使用 2 个元素我没有问题,但不完全理解如何在一个 DIV 中完成。
现在我只有一个半圆:
.element {
height: 10px;
width: 10px;
border-bottom-left-radius: 20px;
border-top-left-radius: 20px;
background-color: #00a680;
}
最佳答案
你可以简单地使用渐变:
.box {
width: 150px;
height: 150px;
border: 15px solid #00a680;
border-radius: 50%;
padding: 15px;
background: linear-gradient(to right, #00a680 50%, transparent 0) content-box;
box-sizing:border-box;
}
<div class="box">
</div>
关于html - 半圆与全圆 CSS 一个元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53573741/