CSS 中的无限符号

Question

我正在考虑使用 CSS、SVG 或 Canvas 创建无限符号。

如果您不知道无限符号是什么，这是一个示例：

我曾尝试创建形状，但只成功创建了形状的一侧。我最终希望将其保留为一个元素并尽可能简单。

.infinity {
  width: 100px;
  height: 100px;
  border-radius: 50% 50% 0 50%;
  border: 5px solid black;
  transform: rotate(-45deg);
}

<div class="infinity"></div>

我发现了这个问题：

Infinity symbol with HTML

但我正在考虑将其用作某种图标或图像，因此希望形状更加自由。

Answer 1

CSS

通过使用伪元素，您可以创建形状的两边，从而获得所需的输出。

此解决方案将在所有浏览器中得到很好的支持。

div {
  position: relative;
  width: 178px;
  height: 100px;
}
div:before,
div:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 60px;
  height: 60px;
  border: 10px solid black;
  border-radius: 50px 50px 0 50px;
  transform: rotate(-45deg);
}
div:after {
  left: auto;
  right: 0;
  border-radius: 50px 50px 50px 0;
  transform: rotate(45deg);
}

<div></div>

这是来自此处的修订版本：CSS-Tricks

如果您想让它更匀称，稍微修改一下边界半径规则确实有助于让它更匀称。

div {
  position: relative;
  width: 178px;
  height: 100px;
}
div:before,
div:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 60px;
  height: 60px;
  border: 10px solid black;
  border-radius: 80% 0 55% 50% / 55% 0 80% 50%;
  transform: rotate(45deg);
}
div:after {
  left: auto;
  right: 0;
  transform: rotate(-135deg);
}

<div></div>

SVG

SVG 代表可缩放矢量图形。 Web 浏览器将其视为图像，但您可以在 SVG 中添加文本和普通 HTML 元素。

它在所有浏览器中都得到很好的支持，可在此处查看：CanIUse

SVG | MDN

<svg height="150" viewbox="0 50 200 200">
  <path fill="none" stroke="#333333" stroke-width="5" d="M100,100 
             C200,0 200,200 100,100
             C0,0 0,200 100,100z" />
</svg>

Canvas

Canvas 类似于 SVG，但使用光栅（基于像素）而不是矢量来创建形状。

浏览器对 Canvas 的支持是 quite good.

var shape = document.getElementById('infinity').getContext('2d');
shape.lineWidth = 6;
shape.strokeStyle = "#333";
shape.beginPath();
shape.moveTo(100, 100);
shape.bezierCurveTo(200, 0, 200, 200, 100, 100);
shape.bezierCurveTo(0, 0, 0, 200, 100, 100);
shape.closePath();
shape.stroke();

<canvas id="infinity"></canvas>

HTML

取自几乎重复的答案，这是所有 HTML 备选方案的累积。

我添加这个只是为了规范，并向用户表明 HTML 个实体可以使用该形状。

p {
  font-size: 2em;
}

<p>∞</p>
<p>&#8734;</p>
<p>&#x221E;</p>
<p>&infin;</p>

CSS 中的无限符号

Infinity Symbol in CSS

html

css

svg

css-shapes

CSS

SVG

Canvas

HTML