有没有办法通过CSS编码制作以下形状

Question

有没有办法通过CSS编码制作以下形状，没有JavaScript？

Answer 1

您有两种选择： 使用 SVG 绘制形状（更好的方法）

使用一些简单形状（圆圈和方形）来获得它 例如，一个大的圆形蓝色，并在一个小的圆形白色：你会得到一个圆圈（否则，你只能获得一个圆圈并放一个蓝色边框） 然后，两个正方形旋转45°，一个在左边，另一个在右边

他们有很多方法可以获得这种形状，但你应该使用svg。

Answer 2

这可以通过一个非常简单的CSS代码来实现：

＆＃13;

＆＃13;

div{
width:50px;
height:50px;
border-radius:50%;
border:10px solid transparent;
border-bottom-color:blue;
}

＆＃13;

<div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

Css始终为用户提供设计任何形状（真实或不真实）的能力，尤其是通过发明CSS3。

在这里，我给你一个用css制作的样本，你可以看看并了解如何制作你的想法 - ＆gt;

{{1}}

但是我建议使用SVG作为评论中提到的其他人，但如果您需要特殊情况，那么为什么不呢。

！月亮（

Answer 4

我必须添加替代:)（编辑添加：作为内联SVG）

<svg height="55" width="50">
 <path d="M 45 40 A 25 25 0 0 1 5 40" stroke="blue" stroke-width="10" fill="none" />
  Sorry, your browser does not support inline SVG.
</svg>