使用 CSS 的部分圆形边框答案

【问题标题】：Partial circular border using CSS使用 CSS 的部分圆形边框
【发布时间】：2013-12-17 16:45:24
【问题描述】：

我想使用纯 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 Edit2：对不起，我刚刚意识到我链接了错误的 jsfiddle，正确的是：http://jsfiddle.net/5MZMj/202/

【问题讨论】：

边框是div 的一部分。如果您只想旋转边框，则必须将其包装在另一个 div 中并旋转它。
“去掉 25%”是什么意思？
@Bort：添加图片以便更好地解释，请参阅：imgur.com/JU78ICT
我认为 CSS 不可能。它肯定不适用于大多数浏览器。

标签： css css-shapes

【解决方案1】：

我不确定这是否是您要查找的内容，但一个简单的技巧是将右上角的圆圈放在主 div 后面：

#f {
  z-index: -1;
}

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

【讨论】：

事情是我希望能够将百分比从 5% 变化到 25%，这很难做到这一点
我认为您是在通过 CSS 讨论部分边框，这是不可能的。

【解决方案2】：

使用伪元素部分解决，见：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 会改变要移除的弧度。

[不过应该有更好的方法，以某种方式编辑单个变量会改变要删除的弧的数量]

【讨论】：

【解决方案3】：

我没听明白，但可能这就是答案。

#f
{
    right:-93px;
}

http://jsfiddle.net/7zDNK/

【讨论】：

【解决方案4】：

如果您的意思是这样，您可以指定每个角的半径：

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

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

【讨论】：

【解决方案5】：

如果你想从角落里拿出更少的一块，你需要调整圆圈的位置。 http://jsfiddle.net/5MZMj/201/

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

【讨论】：