纯CSS绘制风车（一）

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

本帖最后由马黑黑于 2024-3-2 11:20 编辑 <style>
.mama { font-size: 18px; }
.mama p { margin: 10px 0; }
#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%; }
.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>

<div class="mama">

<h2>效果：</h2>
<div id="mydiv"></div>
<h2>代码：</h2>
<div class='mum'>
<cl-cd data-idx="1"><style></cl-cd>
<cl-cd data-idx="2">#mydiv {</cl-cd>
<cl-cd data-idx="3">    margin: 60px auto;</cl-cd>
<cl-cd data-idx="4">    width: 260px;</cl-cd>
<cl-cd data-idx="5">    height: 260px;</cl-cd>
<cl-cd data-idx="6">    background: </cl-cd>
<cl-cd data-idx="7">        linear-gradient(red, tan),</cl-cd>
<cl-cd data-idx="8">        linear-gradient(orange, pink),</cl-cd>
<cl-cd data-idx="9">        linear-gradient(cyan, olive),</cl-cd>
<cl-cd data-idx="10">        linear-gradient(lightblue, yellow);</cl-cd>
<cl-cd data-idx="11">    background-repeat: no-repeat;</cl-cd>
<cl-cd data-idx="12">    background-position: 0 0, 50% 0, 0 100%, 100% 100%;</cl-cd>
<cl-cd data-idx="13">    background-size: 50% 50%;</cl-cd>
<cl-cd data-idx="14">    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%);</cl-cd>
<cl-cd data-idx="15">    position: relative;</cl-cd>
<cl-cd data-idx="16">}</cl-cd>
<cl-cd data-idx="17">#mydiv:before, #mydiv::after { position: absolute; content: ''; }</cl-cd>
<cl-cd data-idx="18">#mydiv::before {</cl-cd>
<cl-cd data-idx="19">    inset: 25%;</cl-cd>
<cl-cd data-idx="20">    background: </cl-cd>
<cl-cd data-idx="21">        linear-gradient(to top right, transparent 49.5%, #ccc 50%, transparent 50.5%),</cl-cd>
<cl-cd data-idx="22">        linear-gradient(to bottom right, transparent 49.5%, #ccc 50%, transparent 50.5%);</cl-cd>
<cl-cd data-idx="23">}</cl-cd>
<cl-cd data-idx="24">#mydiv::after {</cl-cd>
<cl-cd data-idx="25">    left: calc(50% - 10px);</cl-cd>
<cl-cd data-idx="26">    top: calc(50% - 10px);</cl-cd>
<cl-cd data-idx="27">    width: 12px;</cl-cd>
<cl-cd data-idx="28">    height: 12px;</cl-cd>
<cl-cd data-idx="29">    background: red;</cl-cd>
<cl-cd data-idx="30">    border: 4px solid white;</cl-cd>
<cl-cd data-idx="31">    border-radius: 50%;</cl-cd>
<cl-cd data-idx="32">}</cl-cd>
<cl-cd data-idx="33"> </cl-cd>
<cl-cd data-idx="34"></style></cl-cd>
<cl-cd data-idx="35"> </cl-cd>
<cl-cd data-idx="36"><div id="mydiv"></div></cl-cd>
</div>

</div>

马黑黑 发表于 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 的尺寸。

红影发表于 2024-3-2 09:55

奇怪，有一个的上面怎么有个斜线。只要2个伪元素就能做出4个图案，我得仔细学习一下{:4_187:}

红影发表于 2024-3-2 10:09

原来不是伪元素画的图案，clip-path:已经把风车画完了。before参与颜色设置，after是弄当中的圆点啊。开始时先入为主了{:4_173:}

红影发表于 2024-3-2 10:24

这个css还挺复杂，主要是颜色设置方面很奇妙。
background-position:就是对应着分别指定上面四个线性渐变的起始位置么？
然后伪元素的before把渐变在规定的位置截断了，所以四个方向才各自保留了自己原来的渐变吧？

红影发表于 2024-3-2 10:25

看到黑黑占位了，等着占位里的内容出来再继续来学习{:4_187:}

红影发表于 2024-3-2 10:29

我试了一下，before里的截断如果是to top bottom加上to left right，那条斜线就没了呢{:4_204:}

马黑黑 发表于 2024-3-2 11:06

红影发表于 2024-3-2 10:29
我试了一下，before里的截断如果是to top bottom加上to left right，那条斜线就没了呢

走向很重要

马黑黑 发表于 2024-3-2 11:56

红影发表于 2024-3-2 10:09
原来不是伪元素画的图案，clip-path:已经把风车画完了。before参与颜色设置，after是弄当中的圆点啊。开始 ...

{:4_199:}

南无月 发表于 2024-3-2 17:47

老师厉害，又用代码画画了。。。过不久就是画家了咋办。。

马黑黑 发表于 2024-3-2 17:54

南无月发表于 2024-3-2 17:47
老师厉害，又用代码画画了。。。过不久就是画家了咋办。。

画家基本都是讨饭的，没多少人能像齐白石张大千冷军

红影发表于 2024-3-2 17:58

马黑黑发表于 2024-3-2 11:06
走向很重要

看到有斜线也很漂亮呢，黑黑太厉害了{:4_199:}

红影发表于 2024-3-2 17:59

马黑黑发表于 2024-3-2 11:56

谢谢黑黑{:4_187:}

马黑黑 发表于 2024-3-2 18:19

红影发表于 2024-3-2 17:59
谢谢黑黑

阔气阔气

马黑黑 发表于 2024-3-2 18:20

红影发表于 2024-3-2 17:58
看到有斜线也很漂亮呢，黑黑太厉害了

刚开始做的时候，我用 grid 布局定位，后来撤掉 grid，忘了重新定位伪元素

红影发表于 2024-3-2 19:23

马黑黑发表于 2024-3-2 18:19
阔气阔气

必须的{:4_173:}

红影发表于 2024-3-2 19:24

马黑黑发表于 2024-3-2 18:20
刚开始做的时候，我用 grid 布局定位，后来撤掉 grid，忘了重新定位伪元素

原来还能弄出这样漂亮的斜线，黑黑的帖子里含金量满满{:4_199:}

马黑黑 发表于 2024-3-2 19:32

红影发表于 2024-3-2 19:24
原来还能弄出这样漂亮的斜线，黑黑的帖子里含金量满满

{:4_172:}

马黑黑 发表于 2024-3-2 19:32

红影发表于 2024-3-2 19:23
必须的

{:4_181:}

红影发表于 2024-3-2 20:11

马黑黑发表于 2024-3-2 19:32

这个比（二）更漂亮{:4_187:}

页: [1] 2 3 4 5 6

花潮论坛's Archiver

纯CSS绘制风车（一）