CSS布局之道——内凹圆角
CSS布局之道——内凹圆角
流眸
发布于 2020-05-22 11:25:06
发布于 2020-05-22 11:25:06
一、 效果图
先来看一下效果图：
二、 实现
1. 场景
看上图，此类场景应该很是常用吧，比如账单、卡片、列表等。
2. 实现思路
看到效果图，能想到的实现方法则是
- planA：border-radius直接搞起来
- planB：定位
但是细想之后发现两者皆不可用，border-radius处理的话是凸角，舍弃；定位需要独立出来两个模块，复杂度高了，舍弃。可是舍弃后，需要怎么做呢？切背景图吗？显然不合理，如果内容不固定，则模块的长度也不一样，背景图也会拉伸；思来想去，还是得从 定位上做文章：既然元素多比较复杂，那就直接在伪类上动手。可能大家猜到了，就是直接在 ::before、 ::after上模拟出来。
三、 代码
1. 基础布局
<!-- html：随便一些div -->
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
body{
margin: 0;
background: #000;
padding: 20px 0;
}
div{
width: 80vw;
min-height: 15vh;
background: #666;
border-radius: 6px;
margin: 0 auto;
position: relative;
border-top: 1px dashed #333;
}
div:first-child{
border: none;
}
2. 伪类
基础布局出来后，怎么利用伪类处理呢？思路是这样的：
- 利用伪类画出来一个与主题背景色一样的圆；
- 定位，向左(右)偏移圆自身的一半，视觉效果就是半个圆在上面；
- 继续定位，向上继续偏移小球的一半，视觉效果则是每个模块有个四分之一内凹圆角一样。
知道思路后，就继续实现吧：
div::before,div::after{
content: '';
width: 20px;
height: 20px;
border-radius: 50%;
background: #000;
position: absolute;
z-index: 999;
}
div::before{
left: -10px;
top: -10px;
}
div::after{
right: -10px;
top: -10px;
}
div:first-child::before,div:first-child::after{
content: '';
width: 0;
height: 0;
}
这样就完成了~
本文参与 腾讯云自媒体分享计划，分享自微信公众号。
原始发表：2020-05-06，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录