单元素实现六角米字型

马黑黑

<style>
.mi6 {
	margin-top: 100px;
	margin-left: calc(50% - 100px);
	width: 200px;
	height: 20px;
	border-radius: 20px;
	background: radial-gradient(transparent,purple);
	filter: drop-shadow(0 0 8px gray);
	transform: rotate(30deg);
	position: relative;
}
.mi6::before, .mi6::after {
	position: absolute;
	content: '';
	inset: 0;
	border-radius: 20px;
	background: inherit;
	transform: rotate(120deg);
}
.mi6::after { transform: rotate(240deg); }
</style>

<div class="mi6"></div>

预览效果

红影

想了一下，单元素旋转30度，伪元素before是在30度的情况下再转120，单论这根应该是在150度方向，而伪元素after是在30度基础上再转240度，位于270度方向上，怪不得有一根处在竖直方向上。

红影

这个做播放器按钮肯定也很好看呢

马黑黑

红影 发表于 2024-2-23 13:52
想了一下，单元素旋转30度，伪元素before是在30度的情况下再转120，单论这根应该是在150度方向，而伪元素af ...

嗯，如果不想这么折腾，就设置宽20px高200px，这就站立了。

马黑黑

红影 发表于 2024-2-23 13:52
这个做播放器按钮肯定也很好看呢

如果合适可以做做

南无月

来学习老师新的教程~~老师设计的创意厉害。。。影子解说的也很厉害

红影

马黑黑 发表于 2024-2-23 18:02
嗯，如果不想这么折腾，就设置宽20px高200px，这就站立了。

原来你是想折腾一下，让我们多学点啊。其实看到的时候就想，为什么不是20*200呢，那样不是更直接么

马黑黑

南无月 发表于 2024-2-23 19:09
来学习老师新的教程~~老师设计的创意厉害。。。影子解说的也很厉害

这个就是杠上花而已

红影

马黑黑 发表于 2024-2-23 18:04
如果合适可以做做

比如放在船头的舵，就可以用它

马黑黑

红影 发表于 2024-2-23 19:56
比如放在船头的舵，就可以用它

哦，那个我好想做过，用图片的

马黑黑

红影 发表于 2024-2-23 19:55
原来你是想折腾一下，让我们多学点啊。其实看到的时候就想，为什么不是20*200呢，那样不是更直接么{:4_17 ...

红影

马黑黑 发表于 2024-2-23 19:58
哦，那个我好想做过，用图片的

我估计也是被那个牵引，才说出这句

南无月

马黑黑 发表于 2024-2-23 19:55
这个就是杠上花而已

杠上开花，绝对的好彩头，老师要发了。。

红影

马黑黑 发表于 2024-2-23 19:58

你厉害

马黑黑

红影 发表于 2024-2-23 20:20
你厉害

啥厉害

马黑黑

南无月 发表于 2024-2-23 20:18
杠上开花，绝对的好彩头，老师要发了。。

又不是和面，发什么发

马黑黑

红影 发表于 2024-2-23 20:16
我估计也是被那个牵引，才说出这句

那不是。这帖子，和我刚看到的一个图案有关

红影

马黑黑 发表于 2024-2-23 21:09
啥厉害

想得周全啊。

红影

马黑黑 发表于 2024-2-23 21:12
那不是。这帖子，和我刚看到的一个图案有关

哦哦，看到就能做出来，厉害

马黑黑

红影 发表于 2024-2-23 22:19
想得周全啊。

也是丢三落四的