纯CSS绘制风车（一）

马黑黑 · 发表于 2024-3-2 08:01

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由马黑黑于 2024-3-2 11:20 编辑

效果：

代码：

<style>

#mydiv {

margin: 60px auto;

width: 260px;

height: 260px;

background:

linear-gradient(red, tan),

linear-gradient(orange, pink),

linear-gradient(cyan, olive),

linear-gradient(lightblue, yellow);

background-repeat: no-repeat;

background-position: 0 0, 50% 0, 0 100%, 100% 100%;

background-size: 50% 50%;

clip-path: polygon(0 50%, 33.3% 33.3%, 50% 33.3%, 50% 0, 66.6% 33.3%, 66.6% 50%, 100% 50%, 66.6% 66.6%, 50% 66.6%, 50% 100%, 33.3% 66.6%, 33.3% 50%);

position: relative;

}

#mydiv:before, #mydiv::after { position: absolute; content: ''; }

#mydiv::before {

inset: 25%;

background:

linear-gradient(to top right, transparent 49.5%, #ccc 50%, transparent 50.5%),

linear-gradient(to bottom right, transparent 49.5%, #ccc 50%, transparent 50.5%);

}

#mydiv::after {

left: calc(50% - 10px);

top: calc(50% - 10px);

width: 12px;

height: 12px;

background: red;

border: 4px solid white;

border-radius: 50%;

}

</style>

马黑黑 · 发表于 2024-3-2 08:01

本帖最后由马黑黑于 2024-3-2 11:55 编辑

这是使用 clip-path 的多边形切割 polygon 对一个 260*260 的div盒子进行操作而成的几何外观，并辅以两个伪元素做交叉线和中心圆点。
polygon 切割在 clip-path 属性中表现非凡，只要确定好每一个点的XY坐标，这些点最终将以线条按点的顺序衔接而成。坐标点支持百分比，这会使得要切割的盒子大小可以随意改变。

两个伪元素：

::before 使用 inset: 25%; 定位，就是说，上、右、下、左分别举例父元素上边、右边、下边、左边 25% 的距离，然后，使用 background 的线性渐变背景绘制两条斜线，它其实是 ::before 伪元素的对角线，用以模拟风车也的折线（显然不像哈）。线性渐变背景的语句，巧妙利用透明色和实体色的边界处理，令其能够呈现出细线条。

::after 呈现出来的效果就是中心圆点。这个相对简单，背景色和边框设置而已，主要还是定位问题：要让他处在整体的中心，计算时需要考虑 width 和 height 以及 border 的尺寸。