无穷大图标代码

马黑黑

代码：

<style>
.infinity {
	--size: 200px;
	--border: 16px;
	margin: 30px auto;
	width: var(--size);
	height: var(--size);
	border: 1px solid gray;
	filter: drop-shadow(0 0 6px black);
	position: relative;
}
.infinity::before, .infinity::after {
	position: absolute;
	content: '';
	width: calc(50% - var(--border) * 1.5);
	height: calc(50% - var(--border) * 1.5);
	border: var(--border) solid teal;
	border-radius: 50% 50% 0 50%;
	transform-origin: 100% 100%;
}
.infinity::after {
	transform: rotate(-180deg) translate(var(--border), var(--border));
}
</style>

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

运行代码

马黑黑

伪元素画出矩形中左上方向四分之一的图标，然后其中一个伪元素旋转180度并左移、下移到右下角。数据的计算精准到位，仅需改变两个CSS变量 --size 和 --border 宽高不同、曲线粗细不同的图案。图案边框用于观察，实际使用时可以去掉或经过加工参与到图案中来。

需要平躺的无穷大图案，可在 .infinity 选择器中加入旋转语句，-45度。

彩云归

马黑黑

彩云归 发表于 2024-9-7 18:49

感谢

花飞飞

我在瞅它怎么变成空心的了。。裁的本来是一块儿的。把背景background-color:换成--border: 16px;就只有一条边了？

花飞飞

width: calc(50% - var(--border) * 1.5);
height: calc(50% - var(--border) * 1.5);
这两句可以控制大小。。

花飞飞

花飞飞

偏到哪里去了

马黑黑

花飞飞 发表于 2024-9-7 20:07
偏到哪里去了

正了

花飞飞

马黑黑 发表于 2024-9-7 20:08
正了

该正的正了

马黑黑

花飞飞 发表于 2024-9-7 20:23
该正的正了

达到目的

花飞飞

马黑黑 发表于 2024-9-7 21:18
达到目的

今天的三层立体也好看

马黑黑

花飞飞 发表于 2024-9-8 18:56
今天的三层立体也好看

还好吧