Question

我想使用纯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/

Answer 1

我不确定这是否是您正在寻找的，但一个简单的黑客就是将右上方的圆圈放在主要的div之后：

#f {
  z-index: -1;
}

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

Answer 2

使用psuedo元素部分解决，请参阅：http://jsfiddle.net/5MZMj/205/

:after {
    display: inline-block;
    content: "";
    border-left: 10px solid transparent;
    border-top: 25px solid #fff;
    border-right: 10px solid transparent;
    border-top-color: #fff;
    position: absolute;
    margin-top:-42px;
    margin-left: -5px;
}

编辑margin-top，margin-left和border-right会改变要删除的弧量。

[应该有更好的方法，在某种程度上编辑单个变量会改变要移除的弧的数量]

Answer 3

我没有得到你们所有人，但也许这就是答案。

#f
{
    right:-93px;
}

http://jsfiddle.net/7zDNK/

Answer 4

如果您的意思是：

，您可以为每个角指定半径

border-radius: 5px 10px 15px 20px;

从左上角开始顺时针方向移动。

Answer 5

如果你想减少一个角落的大块，你需要调整圆的位置。 http://jsfiddle.net/5MZMj/201/

#f {
    right: -85px;
    top: -85px;
}

使用CSS的部分圆形边框

5 个答案: