纯CSS绘制风车（二）
<style>.mum { position: relative; margin: 0; padding: 10px; font: normal 16px/20px Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; color: black; background: rgba(240, 240, 240,.95); box-shadow: 2px 2px 4px gray; border: thick groove lightblue; border-radius: 6px; }
.mum ::selection { background-color: rgba(0,100,100,.35); }
.mum div { margin: 0; padding: 0; }
.mum cl-cd { display: block; position: relative; margin: 0 0 0 50px; padding: 0 0 0 10px; white-space: pre-wrap; overflow-wrap: break-word; border-left: 1px solid silver; }
.mum cl-cd::before { position: absolute; content: attr(data-idx); width: 50px; color: gray; text-align: right; transform: translate(-70px); }
.tRed { color: red; }
.tBlue { color: blue; }
.tGreen { color: green; }
.tDarkRed { color: darkred; }
.tMagenta { color: magenta; }
</style>
<h2>效果：</h2>
<style>
#mydiv {
margin: 20px auto;
width: 260px;
height: 260px;
background:
linear-gradient(tan 50%, darkred 0),
linear-gradient(90deg, orange 50%, peru 0),
radial-gradient(circle, snow 6px, blue 9px, transparent 10px, transparent 0);
background-blend-mode: saturation;
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%);
}
</style>
<div id="mydiv"></div>
<h2>代码</h2>
<div class='mum'>
<cl-cd data-idx="1"><<span class="tDarkRed">style</span>></cl-cd>
<cl-cd data-idx="2">#mydiv {</cl-cd>
<cl-cd data-idx="3"> <span class="tBlue">margin:</span> 20px auto;</cl-cd>
<cl-cd data-idx="4"> <span class="tBlue">width:</span> 260px;</cl-cd>
<cl-cd data-idx="5"> <span class="tBlue">height:</span> 260px;</cl-cd>
<cl-cd data-idx="6"> <span class="tBlue">background:</span> </cl-cd>
<cl-cd data-idx="7"> linear-gradient(tan 50%, darkred 0),</cl-cd>
<cl-cd data-idx="8"> linear-gradient(90deg, orange 50%, peru 0),</cl-cd>
<cl-cd data-idx="9"> radial-gradient(circle, snow 6px, blue 9px, transparent 10px, transparent 0);</cl-cd>
<cl-cd data-idx="10"> <span class="tBlue">background-blend-mode:</span> saturation;</cl-cd>
<cl-cd data-idx="11"> <span class="tBlue">clip-path:</span> 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%);</cl-cd>
<cl-cd data-idx="12">}</cl-cd>
<cl-cd data-idx="13"></<span class="tDarkRed">style</span>></cl-cd>
<cl-cd data-idx="14"><br></cl-cd>
<cl-cd data-idx="15"><<span class="tDarkRed">div</span> <span class="tRed">id</span>=<span class="tMagenta">"mydiv"</span>></<span class="tDarkRed">div</span>></cl-cd>
</div>
本帖最后由 马黑黑 于 2024-3-2 12:49 编辑
此法，依然使用 clip-path 属性切割，polygon 的点坐标数据和方法一完全相同。
这里没有使用伪元素，完全通过 background 进行渲染，不过如果风车叶需要折线的话，把方法一的 ::before 伪元素用过了最省事。
两个线性背景同在一个位置，其中一个旋转90度，这就得出不同颜色的风车叶，切割后就有了风车的轮廓。再加一个径向渐变，设置好颜色边界，就得出中心带圆形边框的圆点。多重实体颜色渐变需要使用混合技术，所有背景才能显示，同时，渐变所设计的颜色可能会改变、可能不会渲染出原始颜色。
和图片做的一样啊 绿叶清舟 发表于 2024-3-2 13:01
和图片做的一样啊
这个没有折线 马黑黑 发表于 2024-3-2 13:06
这个没有折线
改变大小不容易吧，下面的百分比也要动的吧 这个的代码还要简单。真棒{:4_199:} 发现css里还是有很多东西要学的呢。这个直接用径向渐变就完成了中间小圆的绘制了。
“如果风车叶需要折线的话，把方法一的 ::before 伪元素用过来最省事。”
然后::after就可以留着做风车的小枝干了{:4_173:} 红影 发表于 2024-3-2 15:48
发现css里还是有很多东西要学的呢。这个直接用径向渐变就完成了中间小圆的绘制了。
“如果风车叶需要折 ...
这想法可以 绿叶清舟 发表于 2024-3-2 13:30
改变大小不容易吧，下面的百分比也要动的吧
用百分比做剪裁就是为了随意改变风车的尺寸 红影 发表于 2024-3-2 15:42
这个的代码还要简单。真棒
不过颜色不好控制额 这个颜色比较沉稳，适合年纪大的儿童。。{:4_173:} 南无月 发表于 2024-3-2 17:48
这个颜色比较沉稳，适合年纪大的儿童。。
老儿童 马黑黑 发表于 2024-3-2 17:30
这想法可以
你上一个贴子里，枝干就是用伪元素做的呢{:4_173:} 马黑黑 发表于 2024-3-2 17:33
不过颜色不好控制额
说不定能配出更意想不到的漂亮颜色呢{:4_199:} 俺来玩一玩{:4_173:} 樵歌 发表于 2024-3-2 18:54
俺来玩一玩
好的 红影 发表于 2024-3-2 18:30
说不定能配出更意想不到的漂亮颜色呢
那要看个人的摆布能力了 红影 发表于 2024-3-2 18:29
你上一个贴子里，枝干就是用伪元素做的呢
其实用什么都可以的 马黑黑 发表于 2024-3-2 19:38
那要看个人的摆布能力了
有时也是运气，如果正好配到喜欢的，就是运气使然呢{:4_173:} 马黑黑 发表于 2024-3-2 19:38
其实用什么都可以的
嗯嗯，只要弄出来，单独设置一样的。