摘要：水是生命之源生产之要生态之基。兴水利除水害事关人类生存社会进步历来是治国安邦的大事。附个生成器，虽然不能生成本文的水滴。
水是生命之源、生产之要、生态之基。兴水利、除水害,事关人类生存、社会进步,历来是治国安邦的大事。巴拉巴拉~不扯淡了，
来看看下面这张图，额，为了扣题，就管她叫水滴吧（虽然是倒的），从这开始，让我们用css来生成她~
1.首先把她理解成一个圆与一个三角组合而成，这样，就有了第一种组合法
.box1 {
width: 100px;
height: 100px;
background-color: red;
border-radius: 50%;
position: relative;
}
.box1::after {
position: absolute;
content: "";
width: 50%;
height: 50%;
background-color: #000;
/* transform: rotate(45deg) translate(-50%, -50%);
left: 50%;
top: 50%;*/
transform: rotate(45deg);
left: 25%;
top: 60%;
}
简单粗暴，一个圆加一个旋转的方块露出的三角，在这里还尝试了下用translate来尝试定位，虽然失败了（不好定位，没旋转的时候很好用，且能使用基于自身的百分比值来定位，可方便的实现垂直居中）。
2.还有种思路，一个竖着的椭圆，把她的左下右下想把法去掉，然后就有了以下两种尝试
.box2 {
width: 100px;
height: 100px;
background-color: red;
border-radius: 50%;
position: relative;
}
.box2::after {
position: absolute;
content: "";
width: 100%;
height: 100%;
background-color: red;
background: linear-gradient(-45deg,#fff 67%, transparent 0) right, linear-gradient(45deg, #fff 67%, transparent 0) left; background-size: 50% 100%;
background-repeat: no-repeat;
top: 50%;
}
再这里抱个歉，最终效果我没调成，果然一边看直播一边写demo就是没效率，话说96B跑的真快啊
先拿一个圆，再拿一个豁了一个三角的长方形给挡住，差不多是这意思~
.box3 {
width: 100px;
height: 100px;
background: linear-gradient(-45deg, transparent 33%, red 0) right, linear-gradient(45deg, transparent 33%, red 0) left;
background-size: 50% 100%;
background-repeat: no-repeat;
border-radius: 50% 50%;
position: relative;
}
这个是上面的改进版，直接对自身使用径向渐变 ，把左右两角设为透明，最终效果也没调成，囧
3.顺着上面的思路，自然想到了能直接对圆进行切割的clip-path属性虽然兼容堪忧
.box4 {
width: 100px;
height: 100px;
position: relative;
background-color: red;
-webkit-clip-path: inset(0 0 0 0 round 50% 50% 0 50%);
-o-clip-path: inset(0 0 0 0 round 50% 50% 0 50%);
clip-path: inset(0 0 0 0 round 50% 50% 0 50%);
transform: rotate(45deg);
}
照理说直接切割应该能切出来，但我没弄出来，都是直播的锅，这里我取了个巧，弄了个三个角取圆，一个角直角，最后旋转的方法。
http://bennettfeely.com/clippy/ 附个clip-path生成器，虽然不能生成本文的水滴。
4.其实都能想到了，3里面为什么不直接用border-radius生成圆角呢，兼容还好点，于是
.box1 {
width: 100px;
height: 100px;
background-color: red;
border-radius: 50% 50% 0; /*top;leftright;bottom*/
transform: rotate(45deg);
}
我也不是谦虚，其实我第一个想出来的方法就是这个，上面的就是想凑点字数，代码简介，易于理解，我网上找了下好像也没人过这个，好顶赞~
总结：想要一个形状，我们可以遮，切，组合，旋转，这么多种方法，结合伪元素、动画属性，真是其乐无穷~
当然了可以直接base64或者用图片
http://pan.baidu.com/s/1dFlxtGP 上面demo放这了，顺序不对请不要介意，话说有空得搞个demo页了。
附：CSS生成云朵
.demo {
height: 50px;
width: 50px;
box-shadow: #eee 65px -15px 0 -5px, #eee 25px -25px, #eee 30px 10px, #eee 60px 15px 0 -10px, #eee 85px 5px 0 -5px;
border-radius: 50%;
}
自身是圆，生成自身的阴影再偏移，许多个阴影组合而出的云。
可以在http://www.vastskycc.com/404....这里看到，啊，当然不是我写的，哭~
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/111401.html
摘要：下图是我鼓捣到另外一个小，当到元素的时候，产生火焰效果嗯，这些其实都是对滤镜及混合模式的一些搭配运用。主要几个属性默认大家已经掌握了大概，阅读后可以自行去了解补充更多细节更多精彩技术文章汇总在我的，持续更新，欢迎点个订阅收藏。正文从下面开始。 今天的小技巧是使用纯 CSS 生成火焰，逼真一点的火焰。 嗯，长什么样子？在 CodePen 上输入关键字 CSS Fire，能找到这样的： 或者...
摘要：今天的小技巧是使用纯生成火焰，逼真一点的火焰。如上图，整个蜡烛的骨架，除去火焰的部分很简单，掠过不讲。利用上述，我们要先生成一个类似火焰形状的三角形。 正文从下面开始。 今天的小技巧是使用纯 CSS 生成火焰，逼真一点的火焰。 嗯，长什么样子？在 CodePen 上输入关键字 CSS Fire，能找到这样的： showImg(https://segmentfault.com/img/...
摘要：往期回顾在上一期的前端特效里，我们已经把果汁混合的效果里面的圆形菜单做好了，如果你错过了上篇文章今天我们要讨论的是杯子里面的液体生成问题先来回顾下咱们的果汁混合效果吧果汁混合效果，扫描下方二维码就看到啦我们接着上期的内容来继续往下讲吧，本期 往期回顾 在上一期的【前端特效】☜里，我们已经把果汁混合的效果里面的圆形菜单做好了，如果你错过了上篇文章今天我们要讨论的是杯子里面的液体生成问题 ...
摘要：注意当该固定元素的祖先元素的属性非时，容器由浏览器窗口改为该祖先元素粘性定位，相当于相对定位和固定定位的混合。粘性定位根据一个阈值决定，在大于等于阈值时采用相对定位，小于阈值后则为固定定位。理论上来说，全部 position 的取值有8个 包括：position：static | relative | absolute | fixed | sticky | initial | inherit...
摘要：时至今日，已过而立之年的程序猿一枚，随便写写，把握一下方向，以致于不被物欲横流所侵，世俗生活所扰。惨遭蹂躏的三哥迫于无奈，只得重操旧业，继续干起来程序猿的买卖。 时至今日，已过而立之年的程序猿一枚，随便写写，把握一下方向，以致于不被物欲横流所侵，世俗生活所扰。 初识此行 ...
阅读 2873·2019-08-30 15:55
阅读 2831·2019-08-30 13:46
阅读 1296·2019-08-29 17:29
阅读 3368·2019-08-29 11:08
阅读 3330·2019-08-29 11:04
阅读 961·2019-08-28 18:20
阅读 433·2019-08-26 13:37
阅读 1194·2019-08-26 11:49
