实现带有弧度的左右边角

实现带有弧度的左右边角_第1张图片
像这样的圆角 要怎么实现

实现带有弧度的左右边角_第2张图片
从结构上来看 是用 before 和 after 来实现的
实现带有弧度的左右边角_第3张图片
对激活项 进行设置一个 定位
实现带有弧度的左右边角_第4张图片
对 before 进行一个 相对定位 放在左下角
重点就在于 这个背景css的设置
进行一个圆形的渐变 把圆心定在 左上角 这个圆形的背景 就是透明的 剩下的 就是 这个#f5f5f5的颜色
就能实现这种带弧度的角

background: radial-gradient(circle at 0 0, transparent 25px, #f5f5f5 25px);

radial-gradient: 这表示渐变是径向的,意味着它从一个中心点向外扩散。

circle: 这个关键词指定了渐变的形状为圆形(而非椭圆)。

at 0 0: 这设置了渐变中心位于元素的左上角(水平轴上的 0%,垂直轴上的 0%)。

transparent 25px: 渐变开始时颜色为透明,并且这种透明状态持续到距离中心 25 像素的位置。

#f5f5f5 25px: 在距离中心 25 像素处,颜色变为浅灰色 (#f5f5f5)。因为第二个颜色的起始和结束位置都是 25 像素,这意味着在距离中心正好 25 像素的地方,颜色会从透明变为浅灰色。

这个渐变会在中心位置产生一个圆形区域,该区域从中心向外 25 像素处开始由透明变为固定的浅灰色,覆盖整个元素的其余部分。

右下角的 after 也是同理 只是 定位的位置不一样
实现带有弧度的左右边角_第5张图片

你可能感兴趣的:(css)