当你看到设计稿长这样？是不是下意识觉得UI应该会切图吧，就是整个气泡当作背景图片。

UI不给切图？那就自己写一个！（真香警告）

但是！如果UI不给你切图怎么办，她说这个前端可以实现，因为她以前就是做前端的…好吧，社死现场。

行吧，不切就不切，大不了自己整一个呗，从此你走你的阳光道，我走我的独木桥，以后再喊你切图，我就。。。算了，忍一时风平浪静~

气泡的实现

思路：

  1. 先整个边框
  2. 再做个三角形
  3. 把三角形定位到正确位置
  4. 完事儿~

常规边框

.bubble {
    width: 300px;
    height: 90px;
    border-radius: 10px;
    border: 2px solid #1890F9;
}

UI不给切图？那就自己写一个！（真香警告）

good! 再画个三角形！emmm,哇很烦，不会？3步教你解决:

  1. 打开你可爱的谷歌浏览器
  2. 输入你熟悉的网站地址www.baidu.com
  3. 输入用css画三角形

good，只要你点开任何一个链接，都能学会了。ok，这边就当你会了

画个小三角

用伪元素写一个小三角形：

.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;
}

UI不给切图？那就自己写一个！（真香警告）

调整三角形的位置

.bubble::before {
    content: '';
    position: absolute;
+   top: 90px;
+   left: 50%;
+   margin-left: -10px;
    width: 0;
    height: 0;
    border: 10px solid;
    border-color: #1890F9 transparent transparent;
}

UI不给切图？那就自己写一个！（真香警告）

哎呀，跟设计稿不太像啊，聪明如你，一个三角形搞不定，那就两个啊：

.bubble::after {
    content: '';
    position: absolute;
*   top: 88px;
    left: 50%;
    margin-left: -10px;
    width: 0;
    height: 0;
    border: 10px solid;
*   border-color: #fff transparent transparent;
}

UI不给切图？那就自己写一个！（真香警告）

代码就改了我标 * 的那两行，貌似就可以了！于是发给UI表示自己不再需要你了！结果你猜怎么着？UI真是魔鬼啊，不知道眼睛是不是用钛合金做的，半个像素也被她看出来了，她说三角形那块的边框线偏细了一点点。我…

其实确实是这样的，因为等腰直角三角形的斜边等于直角边的根号2倍…

UI不给切图？那就自己写一个！（真香警告）

90 – 1.414 * 2 = 87.172

.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;
}

UI不给切图？那就自己写一个！（真香警告）

这回UI没话说了。不过她又给我整了个恶心人的东西：

UI不给切图？那就自己写一个！（真香警告）

圆角TAB

我们知道，一个div设置圆角是很容易实现的，但是如果这个圆角它不属于你管控的范围，这个就很糟糕了，难不成还要找别的div的麻烦？就如同上边看到的，预警管理右下角有个圆角，模板管理左下角有个圆角，而这些圆角是随着高亮元素的变化而变化的，大家有什么好的法子吗？这种需求说实话还不好套用上边的3步曲，哎！累，UI啥都喜欢整个圆角，这让我很方啊~

先整自己的圆角

为了看的清楚些，给body添加一些样式：

<body>
    <div class="radius"></div>
</body>

 body {
    padding: 30px;
    background-color: #ddd;
}
.radius {
    width: 300px;
    height: 90px;
    background-color: #fff;
    border-radius: 10px;
}

UI不给切图？那就自己写一个！（真香警告）

下面的圆角能不能往外拐呢？比如设置个负数：

.radius {
    width: 300px;
    height: 90px;
    background-color: #fff;
+   border-radius: 10px 10px -10px -10px;
}

UI不给切图？那就自己写一个！（真香警告）

好吧，我在想屁吃，border-radius压根不支持负数。那用before,after试试？

.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;
}

UI不给切图？那就自己写一个！（真香警告）

调整下border-radius的位置：

.radius::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: -10px;
    width: 10px;
    height: 10px;
+   border-radius: 0 0 10px 0;
    background-color: #fff;
}

UI不给切图？那就自己写一个！（真香警告）

哇！很烦，这个小圆角它位置不行啊，不管你调整border-radius的属性，它都不可能达到设计稿的要求。想骂娘了，看来一个div是行不通了。套用万能公式：一个不行，那就2个。多加一个div：

<body>
    <div class="radius">
        <div class="barbar"></div>
    </div>
</body>

.barbar {
    position: absolute;
    width: 320px;
    height: 10px;
    background-color: #fff;
    bottom: 0;
    left: -10px;
}

UI不给切图？那就自己写一个！（真香警告）

欧耶，这样事情就简单了，真是人如其名，“barbar”不是白喊的。我们把刚刚的before改下颜色和层级：

.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;
}

UI不给切图？那就自己写一个！（真香警告）

同理，右边的用after来盖压：

.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;
}

UI不给切图？那就自己写一个！（真香警告）

good!这样就实现了反向圆角的样子了。虽然有点笨，但能实现就够了。这种需求大家有什么好的解决方法欢迎评论区留言讨论啊。

结语

虽然有时候UI做的设计稿很不好实现，但是最好和他们搞好关系啊，不能关系弄僵，天天不给你切图，那就真的裂开了。因为“我前端王境泽就是写代码猝死,死外面从这里跳下去,也不用你们一点切图” 当UI给你切图后：“真香!”

有一说一，图片香6归香，但是有时候代码实现能降低很多容量，比如你用图片要2k，而css代码就几行，只要几b就行了。这之间的性能差距还是要考虑的，尤其是图片如果多的话。不多说了，去恰鸡了，晚安giegie们！

我正在参与技术社区创作者签约计划招募活动，点击链接报名投稿。