纯CSS绘制风车（三）

马黑黑 发表于 2024-3-2 21:24

本帖最后由马黑黑于 2024-3-2 21:42 编辑 <style>
#mydiv {
margin: 20px auto;
width: 260px;
height: 260px;
position: relative;
--path: polygon(0 100%, 56% 56%, 100% 56%, 100% 100%);
}
#mydiv::before, #mydiv::after {
position: absolute;
content: '';
}
#mydiv::before {
inset: 28%;
background:
linear-gradient(to top right, transparent 49.5%, tan 50%, transparent 50.5%),
linear-gradient(to bottom right, transparent 49.5%, tan 50%, transparent 50.5%);
z-index: 9;
}
#mydiv::after {
left: calc(50% - 10px);
top: calc(50% - 10px);
width: 12px;
height: 12px;
background: red;
border: 4px solid white;
border-radius: 50%;
z-index: 10;
}
.innerDiv {
position: absolute;
width: 100%;
height: 50%;
}
.innerDiv::before, .innerDiv::after {
position: absolute;
content: '';
width: 50%;
height: 100%;
clip-path: var(--path);
}
.innerDiv::before {
background: linear-gradient(to top right, olive, red);
}
.innerDiv::after {
left: 50%;
background: linear-gradient(to bottom right, yellow, red);
transform: rotate(90deg);
}
.innerDiv:nth-of-type(2) {
top: 50%;
transform: rotate(-180deg);
}
.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>
<div id="mydiv">
<div class="innerDiv"></div>
<div class="innerDiv"></div>
</div>
<h2>代码：</h2>

<div class='mum'>
<div class="tGreen"><cl-cd data-idx="1"></cl-cd></div>
<cl-cd data-idx="8"> </cl-cd>
<cl-cd data-idx="9"><style></cl-cd>
<cl-cd data-idx="10">#mydiv {</cl-cd>
<cl-cd data-idx="11">    margin: 20px auto;</cl-cd>
<cl-cd data-idx="12">    width: 260px;</cl-cd>
<cl-cd data-idx="13">    height: 260px;</cl-cd>
<cl-cd data-idx="14">    position: relative;</cl-cd>
<cl-cd data-idx="15">    --path: polygon(0 100%, 56% 56%, 100% 56%, 100% 100%); /* 统一切割变量 */</cl-cd>
<cl-cd data-idx="16">}</cl-cd>
<cl-cd data-idx="17">/* 主元素伪元素共同属性 */</cl-cd>
<cl-cd data-idx="18">#mydiv::before, #mydiv::after {</cl-cd>
<cl-cd data-idx="19">    position: absolute;</cl-cd>
<cl-cd data-idx="20">    content: '';</cl-cd>
<cl-cd data-idx="21">}</cl-cd>
<cl-cd data-idx="22">/* 主元素伪元素一：交叉线 */</cl-cd>
<cl-cd data-idx="23">#mydiv::before {</cl-cd>
<cl-cd data-idx="24">    inset: 28%; /* 28% 是 56% 的一半 */</cl-cd>
<cl-cd data-idx="25">    background:</cl-cd>
<cl-cd data-idx="26">    linear-gradient(to top right, transparent 49.5%, tan 50%, transparent 50.5%),</cl-cd>
<cl-cd data-idx="27">        linear-gradient(to bottom right, transparent 49.5%, tan 50%, transparent 50.5%);</cl-cd>
<cl-cd data-idx="28">    z-index: 9; /* 提升层级 */</cl-cd>
<cl-cd data-idx="29">}</cl-cd>
<cl-cd data-idx="30">/* 主元素伪元素二：中心圆圈 */</cl-cd>
<cl-cd data-idx="31">#mydiv::after {</cl-cd>
<cl-cd data-idx="32">    left: calc(50% - 10px);</cl-cd>
<cl-cd data-idx="33">    top: calc(50% - 10px);</cl-cd>
<cl-cd data-idx="34">    width: 12px;</cl-cd>
<cl-cd data-idx="35">    height: 12px;</cl-cd>
<cl-cd data-idx="36">    background: red;</cl-cd>
<cl-cd data-idx="37">    border: 4px solid white;</cl-cd>
<cl-cd data-idx="38">    border-radius: 50%;</cl-cd>
<cl-cd data-idx="39">    z-index: 10; /* 提升层级 */</cl-cd>
<cl-cd data-idx="40">}</cl-cd>
<cl-cd data-idx="41">/* 风车叶主元素 */</cl-cd>
<cl-cd data-idx="42">.innerDiv {</cl-cd>
<cl-cd data-idx="43">    position: absolute;</cl-cd>
<cl-cd data-idx="44">    width: 100%;</cl-cd>
<cl-cd data-idx="45">    height: 50%;</cl-cd>
<cl-cd data-idx="46">}</cl-cd>
<cl-cd data-idx="47">/* 风车叶伪元素共同属性 */</cl-cd>
<cl-cd data-idx="48">.innerDiv::before, .innerDiv::after {</cl-cd>
<cl-cd data-idx="49">    position: absolute;</cl-cd>
<cl-cd data-idx="50">    content: '';</cl-cd>
<cl-cd data-idx="51">    width: 50%;</cl-cd>
<cl-cd data-idx="52">    height: 100%;</cl-cd>
<cl-cd data-idx="53">    clip-path: var(--path);</cl-cd>
<cl-cd data-idx="54">}</cl-cd>
<cl-cd data-idx="55">/* 风车叶伪元素一：左部叶子*/</cl-cd>
<cl-cd data-idx="56">.innerDiv::before {</cl-cd>
<cl-cd data-idx="57">    background: linear-gradient(to top right, olive, red);</cl-cd>
<cl-cd data-idx="58">}</cl-cd>
<cl-cd data-idx="59">/* 风车叶伪元素二：右部叶子 */</cl-cd>
<cl-cd data-idx="60">.innerDiv::after {</cl-cd>
<cl-cd data-idx="61">    left: 50%;</cl-cd>
<cl-cd data-idx="62">    background: linear-gradient(to bottom right, yellow, red);</cl-cd>
<cl-cd data-idx="63">    transform: rotate(90deg);</cl-cd>
<cl-cd data-idx="64">}</cl-cd>
<cl-cd data-idx="65">/* 风车叶下部叶子 */</cl-cd>
<cl-cd data-idx="66">.innerDiv:nth-of-type(2) {</cl-cd>
<cl-cd data-idx="67">    top: 50%;</cl-cd>
<cl-cd data-idx="68">    transform: rotate(-180deg);</cl-cd>
<cl-cd data-idx="69">}</cl-cd>
<cl-cd data-idx="70"></style></cl-cd>
<cl-cd data-idx="71"> </cl-cd>
<cl-cd data-idx="72"><div id="mydiv"></cl-cd>
<cl-cd data-idx="73">    <div class="innerDiv"></div></cl-cd>
<cl-cd data-idx="74">    <div class="innerDiv"></div></cl-cd>
<cl-cd data-idx="75"></div></cl-cd>
</div>

南无月 发表于 2024-3-2 21:31

这个更好看了。。{:4_199:}创意和实现手法都是一流。。。

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

南无月发表于 2024-3-2 21:31
这个更好看了。。创意和实现手法都是一流。。。

就是代码多

南无月 发表于 2024-3-2 21:36

马黑黑发表于 2024-3-2 21:32
就是代码多

老师解释的好清楚。。多而有序。。。
这篇代码居然被你写得很美是咋回事。。{:4_170:}

马黑黑 发表于 2024-3-2 21:43

南无月发表于 2024-3-2 21:36
老师解释的好清楚。。多而有序。。。
这篇代码居然被你写得很美是咋回事。。

{:4_191:}

红影发表于 2024-3-3 09:12

多种实现思路，都能得到漂亮的风车，黑黑厉害了{:4_199:}

红影发表于 2024-3-3 09:22

没看懂，为什么切割路径画出的和这个展示的图形是反的？
去试了一下去掉风车叶，原来得到的是四条斜线。

马黑黑 发表于 2024-3-3 09:22

红影发表于 2024-3-3 09:12
多种实现思路，都能得到漂亮的风车，黑黑厉害了

哪里哪里

方法不止这些的

红影发表于 2024-3-3 09:25

风车叶主元素和伪元素宽度和高度的取法也没明白。

马黑黑 发表于 2024-3-3 09:25

红影发表于 2024-3-3 09:22
没看懂，为什么切割路径画出的和这个展示的图形是反的？
去试了一下去掉风车叶，原来得到的是四条斜线。

切割的多边形，以左上角的风车叶为原型，其他三个做一定角度的旋转。就是这样拼装的。

四条斜线就是对角线，装饰用

马黑黑 发表于 2024-3-3 09:25

红影发表于 2024-3-3 09:25
风车叶主元素和伪元素宽度和高度的取法也没明白。

这个需要一点点几何知识就能理解了

红影发表于 2024-3-3 09:28

/* 风车叶下部叶子 */
这个应该不仅是下部吧，上下都有了。

马黑黑 发表于 2024-3-3 09:42

红影发表于 2024-3-3 09:28
/* 风车叶下部叶子 */
这个应该不仅是下部吧，上下都有了。

两个 class="innerDiv" 元素做风车叶，一个在上部，另一个在下部。每一个 innerDiv 又分左右两部分。

红影发表于 2024-3-3 11:08

马黑黑发表于 2024-3-3 09:25
切割的多边形，以左上角的风车叶为原型，其他三个做一定角度的旋转。就是这样拼装的。

四条斜线就是对 ...

有了装饰线更漂亮了呢{:4_187:}

红影发表于 2024-3-3 11:09

马黑黑发表于 2024-3-3 09:25
这个需要一点点几何知识就能理解了

嗯嗯，我再想想{:4_204:}

红影发表于 2024-3-3 11:09

马黑黑发表于 2024-3-3 09:42
两个 class="innerDiv" 元素做风车叶，一个在上部，另一个在下部。每一个 innerDiv 又分左右两部分。

是的，这样正好组成风车{:4_187:}

红影发表于 2024-3-3 11:10

马黑黑发表于 2024-3-3 09:22
哪里哪里

方法不止这些的

已经看到黑黑弄出四种了呢，厉害{:4_199:}

马黑黑 发表于 2024-3-3 11:53

红影发表于 2024-3-3 11:10
已经看到黑黑弄出四种了呢，厉害

就这么多了

马黑黑 发表于 2024-3-3 11:54

红影发表于 2024-3-3 11:09
是的，这样正好组成风车

{:4_190:}

马黑黑 发表于 2024-3-3 11:54

红影发表于 2024-3-3 11:09
嗯嗯，我再想想

想通了木有

页: [1] 2 3 4 5

花潮论坛's Archiver

纯CSS绘制风车（三）