当你看到设计稿长这样？是不是下意识觉得UI应该会切图吧，就是整个气泡当作背景图片。
但是！如果UI不给你切图怎么办，她说这个前端可以实现，因为她以前就是做前端的…好吧，社死现场。
行吧，不切就不切，大不了自己整一个呗，从此你走你的阳光道，我走我的独木桥，以后再喊你切图，我就。。。算了，忍一时风平浪静~
气泡的实现
思路：
- 先整个边框
- 再做个三角形
- 把三角形定位到正确位置
- 完事儿~
常规边框
.bubble {
width: 300px;
height: 90px;
border-radius: 10px;
border: 2px solid #1890F9;
}
good! 再画个三角形！emmm,哇很烦，不会？3步教你解决:
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;
}
调整三角形的位置
.bubble::before {
content: '';
position: absolute;
+ top: 90px;
+ left: 50%;
+ margin-left: -10px;
width: 0;
height: 0;
border: 10px solid;
border-color: #1890F9 transparent transparent;
}
哎呀，跟设计稿不太像啊，聪明如你，一个三角形搞不定，那就两个啊：
.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真是魔鬼啊，不知道眼睛是不是用钛合金做的，半个像素也被她看出来了，她说三角形那块的边框线偏细了一点点。我…
其实确实是这样的，因为等腰直角三角形的斜边等于直角边的根号2倍…
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没话说了。不过她又给我整了个恶心人的东西：
圆角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;
}
下面的圆角能不能往外拐呢？比如设置个负数：
.radius {
width: 300px;
height: 90px;
background-color: #fff;
+ border-radius: 10px 10px -10px -10px;
}
好吧，我在想屁吃，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;
}
调整下border-radius的位置：
.radius::before {
content: '';
position: absolute;
bottom: 0;
left: -10px;
width: 10px;
height: 10px;
+ border-radius: 0 0 10px 0;
background-color: #fff;
}
哇！很烦，这个小圆角它位置不行啊，不管你调整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;
}
欧耶，这样事情就简单了，真是人如其名，“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;
}
同理，右边的用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;
}
good!这样就实现了反向圆角的样子了。虽然有点笨，但能实现就够了。这种需求大家有什么好的解决方法欢迎评论区留言讨论啊。
结语
虽然有时候UI做的设计稿很不好实现，但是最好和他们搞好关系啊，不能关系弄僵，天天不给你切图，那就真的裂开了。因为“我前端王境泽就是写代码猝死,死外面从这里跳下去,也不用你们一点切图” 当UI给你切图后：“真香!”
有一说一，图片香6归香，但是有时候代码实现能降低很多容量，比如你用图片要2k，而css代码就几行，只要几b就行了。这之间的性能差距还是要考虑的，尤其是图片如果多的话。不多说了，去恰鸡了，晚安giegie们！
我正在参与技术社区创作者签约计划招募活动，点击链接报名投稿。
评论(0)