马黑黑 发表于 2024-2-23 13:13

单元素实现六角米字型

本帖最后由 马黑黑 于 2024-2-23 13:24 编辑 <br /><br /><div class="mum"><pre id="sCode">
<!--
        单元素旋转30度使整体效果为站立状态
        两个伪元素分别按120度、240度旋转
-->
&lt;style&gt;
.mi6 {
        margin-top: 100px;
        margin-left: calc(50% - 100px);
        width: 200px;
        height: 20px;
        border-radius: 20px;
        background: radial-gradient(transparent,purple);
        filter: drop-shadow(0 0 8px gray);
        transform: rotate(30deg);
        position: relative;
}
.mi6::before, .mi6::after {
        position: absolute;
        content: '';
        inset: 0;
        border-radius: 20px;
        background: inherit;
        transform: rotate(120deg);
}
.mi6::after { transform: rotate(240deg); }
&lt;/style&gt;

&lt;div class="mi6"&gt;&lt;/div&gt;
</pre></div>
<p><br><button id="playCode">预览效果</button></p>
<div id="showBox" style="position: relative;height: 200px;"></div>

<script>
var sF = document.createElement('script');
sF.charset = 'utf-8';
sF.src = 'https://638183.freep.cn/638183/web/js/colorcode.js';
document.querySelector('body').appendChild(sF);

playCode.onclick = () => {
        showBox.innerHTML ? (showBox.innerHTML = '', playCode.innerText = '预览效果') : (showBox.innerHTML = sCode.innerText, playCode.innerText = '关闭预览');
}

</script>

红影 发表于 2024-2-23 13:52

想了一下，单元素旋转30度，伪元素before是在30度的情况下再转120，单论这根应该是在150度方向，而伪元素after是在30度基础上再转240度，位于270度方向上，怪不得有一根处在竖直方向上。{:4_204:}

红影 发表于 2024-2-23 13:52

这个做播放器按钮肯定也很好看呢{:4_199:}

马黑黑 发表于 2024-2-23 18:02

红影 发表于 2024-2-23 13:52
想了一下，单元素旋转30度，伪元素before是在30度的情况下再转120，单论这根应该是在150度方向，而伪元素af ...

嗯，如果不想这么折腾，就设置宽20px高200px，这就站立了。

马黑黑 发表于 2024-2-23 18:04

红影 发表于 2024-2-23 13:52
这个做播放器按钮肯定也很好看呢

如果合适可以做做

南无月 发表于 2024-2-23 19:09

来学习老师新的教程~~老师设计的创意厉害。。。影子解说的也很厉害{:4_199:}{:5_116:}

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

马黑黑 发表于 2024-2-23 18:02
嗯，如果不想这么折腾，就设置宽20px高200px，这就站立了。

原来你是想折腾一下，让我们多学点啊。其实看到的时候就想，为什么不是20*200呢，那样不是更直接么{:4_170:}

马黑黑 发表于 2024-2-23 19:55

南无月 发表于 2024-2-23 19:09
来学习老师新的教程~~老师设计的创意厉害。。。影子解说的也很厉害

这个就是杠上花而已{:4_170:}

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

马黑黑 发表于 2024-2-23 18:04
如果合适可以做做

比如放在船头的舵，就可以用它{:4_196:}

马黑黑 发表于 2024-2-23 19:58

红影 发表于 2024-2-23 19:56
比如放在船头的舵，就可以用它

哦，那个我好想做过，用图片的

马黑黑 发表于 2024-2-23 19:58

红影 发表于 2024-2-23 19:55
原来你是想折腾一下，让我们多学点啊。其实看到的时候就想，为什么不是20*200呢，那样不是更直接么{:4_17 ...

{:4_189:}

红影 发表于 2024-2-23 20:16

马黑黑 发表于 2024-2-23 19:58
哦，那个我好想做过，用图片的

我估计也是被那个牵引，才说出这句{:4_173:}

南无月 发表于 2024-2-23 20:18

马黑黑 发表于 2024-2-23 19:55
这个就是杠上花而已

杠上开花，绝对的好彩头，老师要发了。。{:4_173:}

红影 发表于 2024-2-23 20:20

马黑黑 发表于 2024-2-23 19:58


你厉害{:4_199:}

马黑黑 发表于 2024-2-23 21:09

红影 发表于 2024-2-23 20:20
你厉害

啥厉害

马黑黑 发表于 2024-2-23 21:12

南无月 发表于 2024-2-23 20:18
杠上开花，绝对的好彩头，老师要发了。。

又不是和面，发什么发

马黑黑 发表于 2024-2-23 21:12

红影 发表于 2024-2-23 20:16
我估计也是被那个牵引，才说出这句

那不是。这帖子，和我刚看到的一个图案有关

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

马黑黑 发表于 2024-2-23 21:09
啥厉害

想得周全啊。{:4_187:}

红影 发表于 2024-2-23 22:20

马黑黑 发表于 2024-2-23 21:12
那不是。这帖子，和我刚看到的一个图案有关

哦哦，看到就能做出来，厉害{:4_187:}

马黑黑 发表于 2024-2-23 22:20

红影 发表于 2024-2-23 22:19
想得周全啊。

也是丢三落四的
页: [1] 2 3 4 5 6 7 8
查看完整版本: 单元素实现六角米字型