这个也是用border做的

马黑黑

<style>
.cone {
	--size: 160px;
	--color: rgba(0,100,128,.6);
	margin: 30px;
	position: relative;
	left: calc(50% - var(--size) / 2);
	top: 20px;
	width: var(--size);
	height: var(--size);
	display: grid;
	place-items: center;
}
.cone::before, .cone::after {
	position: absolute;
	content: '';
	width: 0;
	height: 0;
	border-style: solid;
	border-width: calc(var(--size) / 2) calc(var(--size) / 2 - 35px);
	border-color: var(--color) transparent;
	border-radius: 50%;
}
.cone::after { transform: rotate(90deg); }
</style>

<div class="cone"></div>

点击查看效果

绿叶清舟

这么少代码就能做出这样的图形啊

小辣椒

这个做播放器也是漂亮的

花飞飞

这跟那个小风车裁的方法不一样。居然有弧度出来，也是没想到。。。

花飞飞

仔细看了一下，是因为加了border-radius: 50%;
边缘整体就弧形了。。
把这句给之前的风车加上。。
效果也好看

花飞飞

花飞飞

弧的位置不同。。移位后整体效果也不同。

马黑黑

绿叶清舟 发表于 2024-9-6 19:41
这么少代码就能做出这样的图形啊

知识+想象力=无所不能

马黑黑

花飞飞 发表于 2024-9-6 20:12
#mdiv {
        --size: 200px;
        --color: lightblue;

这个满分

马黑黑

花飞飞 发表于 2024-9-6 20:12
弧的位置不同。。移位后整体效果也不同。

无限可能

马黑黑

小辣椒 发表于 2024-9-6 19:57
这个做播放器也是漂亮的

应该不错

绿叶清舟

马黑黑 发表于 2024-9-6 20:41
知识+想象力=无所不能

关键还是要知识了

小辣椒

马黑黑 发表于 2024-9-6 20:42
应该不错

是的，感觉很漂亮

马黑黑

小辣椒 发表于 2024-9-6 22:52
是的，感觉很漂亮

需要修饰一下吧

马黑黑

醉美水芙蓉 发表于 2024-9-6 21:26
欣赏老师漂亮的图图！

谢谢

马黑黑

绿叶清舟 发表于 2024-9-6 21:21
关键还是要知识了

那是自然，巧妇难为无米之炊

花飞飞

马黑黑 发表于 2024-9-6 20:42
这个满分

花飞飞

马黑黑 发表于 2024-9-6 20:42
无限可能

需要多多的时间来尝试