UI不给切图?那就自己写一个!(真香警告)

·  阅读 7957
UI不给切图?那就自己写一个!(真香警告)

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

04a6b0d5f9c43666bd746c545b0d1ad.jpg

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

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

气泡的实现

思路:

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

常规边框

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

image.png

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;
}
复制代码

image.png

调整三角形的位置

.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

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

.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

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

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

image.png

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;
}
复制代码

image.png

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

bda2a5d97440b16b46fe2a5610870d7.jpg

圆角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;
}
复制代码

image.png

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

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

image.png

好吧,我在想屁吃,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;
}
复制代码

image.png

调整下border-radius的位置:

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

image.png

哇!很烦,这个小圆角它位置不行啊,不管你调整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;
}
复制代码

image.png

欧耶,这样事情就简单了,真是人如其名,“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;
}
复制代码

image.png

同理,右边的用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;
}
复制代码

image.png

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

结语

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

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

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

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改