--- theme: cyanosis highlight: atom-one-dark --- 当你看到设计稿长这样？是不是下意识觉得UI应该会切图吧，就是整个气泡当作背景图片。 ![04a6b0d5f9c43666bd746c545b0d1ad.jpg](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/fee4da4fffa04b7da1b9b51ed8eded5c~tplv-k3u1fbpfcp-watermark.image?) 但是！如果UI不给你切图怎么办，她说这个前端可以实现，因为她以前就是做前端的...好吧，社死现场。行吧，不切就不切，大不了自己整一个呗，从此你走你的阳光道，我走我的独木桥，以后再喊你切图，我就。。。算了，忍一时风平浪静~ # 气泡的实现思路： 1. 先整个边框 2. 再做个三角形 3. 把三角形定位到正确位置 4. 完事儿~ ## 常规边框 ```css .bubble { width: 300px; height: 90px; border-radius: 10px; border: 2px solid #1890F9; } ``` ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/894d84a7ce094efd8735ab8f525a1198~tplv-k3u1fbpfcp-watermark.image?) good! 再画个三角形！emmm,哇很烦，不会？3步教你解决: 1. 打开你可爱的[谷歌浏览器](https://juejin.cn/post/7114306621144039455) 2. 输入你熟悉的网站地址[www.baidu.com](https://juejin.cn/post/7114306621144039455) 3. 输入[用css画三角形](https://juejin.cn/post/7114306621144039455) good，只要你点开任何一个链接，都能学会了。ok，这边就当你会了 ## 画个小三角用伪元素写一个小三角形： ```css .bubble { + position: relative; width: 300px; height: 90px; border-radius: 10px; border: 2px solid #1890F9; } .bubble::before { content: ''; position: absolute; width: 0; height: 0; border: 10px solid; border-color: #1890F9 transparent transparent; } ``` ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c13aa216bc204703a169be94a926d356~tplv-k3u1fbpfcp-watermark.image?) ## 调整三角形的位置 ```css .bubble::before { content: ''; position: absolute; + top: 90px; + left: 50%; + margin-left: -10px; width: 0; height: 0; border: 10px solid; border-color: #1890F9 transparent transparent; } ``` ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/60c97cf5a5fe4b63affb3f82ddfe78c2~tplv-k3u1fbpfcp-watermark.image?) 哎呀，跟设计稿不太像啊，聪明如你，一个三角形搞不定，那就两个啊： ```css .bubble::after { content: ''; position: absolute; * top: 88px; left: 50%; margin-left: -10px; width: 0; height: 0; border: 10px solid; * border-color: #fff transparent transparent; } ``` ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ecaf38b0a2c14b6c9c5ef822ce735607~tplv-k3u1fbpfcp-watermark.image?) 代码就改了我标 `*` 的那两行，貌似就可以了！于是发给UI表示自己不再需要你了！结果你猜怎么着？UI真是魔鬼啊，不知道眼睛是不是用钛合金做的，半个像素也被她看出来了，她说三角形那块的边框线偏细了一点点。我... 其实确实是这样的，因为等腰直角三角形的斜边等于直角边的根号2倍... ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b9f6d1c8bff44b30bed0c0018bbd872f~tplv-k3u1fbpfcp-watermark.image?) > 90 - 1.414 * 2 = 87.172 ```css .bubble::after { content: ''; position: absolute; + top: 87.172px; left: 50%; margin-left: -10px; width: 0; height: 0; border: 10px solid; border-color: #fff transparent transparent; } ``` ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/462d69032bc749f6a31cc6c8099f58cf~tplv-k3u1fbpfcp-watermark.image?) 这回UI没话说了。不过她又给我整了个恶心人的东西： ![bda2a5d97440b16b46fe2a5610870d7.jpg](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/787382303be4414f8a59f6f2237c389a~tplv-k3u1fbpfcp-watermark.image?) # 圆角TAB 我们知道，一个div设置圆角是很容易实现的，但是如果这个圆角它不属于你管控的范围，这个就很糟糕了，难不成还要找别的div的麻烦？就如同上边看到的，预警管理右下角有个圆角，模板管理左下角有个圆角，而这些圆角是随着高亮元素的变化而变化的，大家有什么好的法子吗？这种需求说实话还不好套用上边的3步曲，哎！累，UI啥都喜欢整个圆角，这让我很方啊~ ## 先整自己的圆角为了看的清楚些，给body添加一些样式： ```html

``` ```css body { padding: 30px; background-color: #ddd; } .radius { width: 300px; height: 90px; background-color: #fff; border-radius: 10px; } ``` ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0fb9df0243dc46aa9439fd1aa762d511~tplv-k3u1fbpfcp-watermark.image?) 下面的圆角能不能往外拐呢？比如设置个负数： ```css .radius { width: 300px; height: 90px; background-color: #fff; + border-radius: 10px 10px -10px -10px; } ``` ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/524e942744c344649a4630982607536a~tplv-k3u1fbpfcp-watermark.image?) 好吧，我在想屁吃，border-radius压根不支持负数。那用before,after试试？ ```css .radius { + position: relative; width: 300px; height: 90px; background-color: #fff; border-radius: 10px; } .radius::before { content: ''; position: absolute; bottom: 0; left: -10px; width: 10px; height: 10px; border-radius: 10px 0 0 0; background-color: #fff; } ``` ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/aea2138606db4738bd138ce31bbbb8ff~tplv-k3u1fbpfcp-watermark.image?) 调整下border-radius的位置： ```css .radius::before { content: ''; position: absolute; bottom: 0; left: -10px; width: 10px; height: 10px; + border-radius: 0 0 10px 0; background-color: #fff; } ``` ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a3f5d9551c484af7ace1fd8c13e6a135~tplv-k3u1fbpfcp-watermark.image?) 哇！很烦，这个小圆角它位置不行啊，不管你调整border-radius的属性，它都不可能达到设计稿的要求。想骂娘了，看来一个div是行不通了。套用万能公式：一个不行，那就2个。多加一个div： ```html

``` ```css .barbar { position: absolute; width: 320px; height: 10px; background-color: #fff; bottom: 0; left: -10px; } ``` ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7876f12745e841cdb6e9867cfbd0c815~tplv-k3u1fbpfcp-watermark.image?) 欧耶，这样事情就简单了，真是人如其名，“barbar”不是白喊的。我们把刚刚的before改下颜色和层级： ```css .radius::before { content: ''; position: absolute; bottom: 0; + z-index: 1; left: -10px; width: 10px; height: 10px; border-radius: 0 0 10px 0; + background-color: #ddd; } ``` ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/24d707df36514a7f80c5414d7c2e1eb5~tplv-k3u1fbpfcp-watermark.image?) 同理，右边的用after来盖压： ```css .radius::after { content: ''; position: absolute; bottom: 0; z-index: 1; right: -10px; width: 10px; height: 10px; border-radius: 0 0 0 10px; background-color: #ddd; } ``` ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/982efd600583439aa99daf0328987f1a~tplv-k3u1fbpfcp-watermark.image?) good!这样就实现了反向圆角的样子了。虽然有点笨，但能实现就够了。这种需求大家有什么好的解决方法欢迎评论区留言讨论啊。 # 结语虽然有时候UI做的设计稿很不好实现，但是最好和他们搞好关系啊，不能关系弄僵，天天不给你切图，那就真的裂开了。因为“我前端王境泽就是写代码猝死,死外面从这里跳下去,也不用你们一点切图” 当UI给你切图后：“真香!” 有一说一，图片香6归香，但是有时候代码实现能降低很多容量，比如你用图片要2k，而css代码就几行，只要几b就行了。这之间的性能差距还是要考虑的，尤其是图片如果多的话。不多说了，去恰鸡了，晚安giegie们！我正在参与掘金技术社区创作者签约计划招募活动，[点击链接报名投稿](https://juejin.cn/post/7112770927082864653 "https://juejin.cn/post/7112770927082864653")。