水吧飞行器

马黑黑

马黑黑

代码

1. <style>
   
2. #mydiv {
   
3.         margin: 100px auto;
   
4.         width: 100px;
   
5.         height: 120px;
   
6.         border-style: solid;
   
7.         border-color: transparent transparent hsla(120, 70%,50%, .25) transparent;
   
8.         border-width: 20px 120px 120px 120px;
   
9.         border-radius: 50%;
   
10.         box-shadow: 10px 20px 30px green inset, -10px -20px 40px green inset;
    
11.         position: relative;
    
12. }
    
13. </style>
    
14. 
    
15. <div id="mydiv"></div>

复制代码

马黑黑

主体部分（上部）的背景色由 box-shadow 内阴影渲染而成；下部由 border 构造出来。

这个飞行器完全符合空气动力学原理，假若真的要飞行，一度电就可以从地球飞到月球。

红影

很奇特，就这么几句代码就能弄出这个形状来，想象里应该画出来要用很多代码才是

红影

那个三角形是怎样跑到边框下边的呢，而且border-radius: 50%;作用上去也这么奇特。

梦油

好像是个子弹头

马黑黑

红影 发表于 2023-3-28 13:27
很奇特，就这么几句代码就能弄出这个形状来，想象里应该画出来要用很多代码才是

代码很少的。但要丰富它，代码也少不了多少，比如加螺旋桨、加动画什么的

马黑黑

梦油 发表于 2023-3-28 15:13
好像是个子弹头

子弹头的形状其实就是充分考虑了如何最有效地避开空气阻力

马黑黑

红影 发表于 2023-3-28 13:37
那个三角形是怎样跑到边框下边的呢，而且border-radius: 50%;作用上去也这么奇特。

这个你要慢慢品了。这是个巨大的border，你可以设置每个方向的border为有效颜色，查看效果。

马黑黑

红影 发表于 2023-3-28 13:27
很奇特，就这么几句代码就能弄出这个形状来，想象里应该画出来要用很多代码才是

其实这不叫三角形，叫扇形，也很像菇凉的裙子

梦油

马黑黑 发表于 2023-3-28 17:14
子弹头的形状其实就是充分考虑了如何最有效地避开空气阻力

是的，有道理。减少阻力，增加速度。

马黑黑

梦油 发表于 2023-3-28 17:24
是的，有道理。减少阻力，增加速度。

没错

梦油

马黑黑 发表于 2023-3-28 17:58
没错

你想的真周全。

红影

马黑黑 发表于 2023-3-28 17:13
代码很少的。但要丰富它，代码也少不了多少，比如加螺旋桨、加动画什么的

这么点代码就出来了，真都很神奇。

马黑黑

红影 发表于 2023-3-28 21:01
这么点代码就出来了，真都很神奇。

自己有空研究一下

马黑黑

梦油 发表于 2023-3-28 20:12
你想的真周全。

一般般

红影

马黑黑 发表于 2023-3-28 17:16
这个你要慢慢品了。这是个巨大的border，你可以设置每个方向的border为有效颜色，查看效果。

我对border的理解有误，一直以为是是边线向内的矩形，实际它是骑在线上的，而且本身就是三角形。当其余三遍透明，它直接显示为三角形。去搜了半天，才模模糊糊有点感觉了。再加上margin: 100px ，我大概知道它为什么在下面了。

红影

马黑黑 发表于 2023-3-28 17:16
这个你要慢慢品了。这是个巨大的border，你可以设置每个方向的border为有效颜色，查看效果。

我知道你为什么说这个是个巨大的border了，因为120实际是240

红影

马黑黑 发表于 2023-3-28 17:16
这个你要慢慢品了。这是个巨大的border，你可以设置每个方向的border为有效颜色，查看效果。

好吧，前一个回复收回，我又弄错了，刚发现，边框是向外延展的，是从中间的框往外走的。
嗯，现在终于弄明白了。之前一直不明白那个三角形为什么在方框下面，是因为我之前的理解都是错的。

马黑黑

红影 发表于 2023-3-28 22:13
好吧，前一个回复收回，我又弄错了，刚发现，边框是向外延展的，是从中间的框往外走的。
嗯，现在终于弄 ...

边框就是本体之外的东东，这个好理解的