css3如何实现这样的半圆环

Question

如图所示，如何用css实现这样的效果呢，另外是否可以给圆环加一个外发光的效果

Answer 1

用clip-path？

<div style="
    width: 50px;
    height: 50px;
    border: 3px solid #f00;
    border-radius: 50px;
    -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0 100%);
"></div>

先创建一个圆环然后把上半部分切掉