使用CSS的部分圆形边框

2019年8月4日 181次阅读

我想使用纯css在元素周围创建一个部分圆形边框.我已经能够在一定程度上达到这个效果：
http://jsfiddle.net/5MZMj/202/

但是,这会消除25％或边界,如何仅删除5％或说20％？

另外,如何旋转边框(不旋转内容)？

jsfiddle中的代码：

HTML：

<div class="one">
    <div class="two">4.5</div>
</div>

CSS：

.two {
    font-size: 24px;
    display:inline;
    padding-bottom:5px;
}
.one {
    padding: 10px;
    border: 1px solid green;
    border-radius: 25px;
    border-top-color: transparent;
    width:30px;
    margin-left: 10px;
}

编辑：图片,以了解我正在努力实现的效果：http://imgur.com/JU78ICT
编辑2：对不起,我刚刚意识到我已经连接了错误的jsfiddle,正确的是：http://jsfiddle.net/5MZMj/202/

最佳答案 我不确定这是不是你想要的,但是一个简单的黑客就是把右上方的圆圈放在你的主div之后：

#f {
  z-index: -1;
}

http://jsfiddle.net/5MZMj/199/

点赞