css3凹陷平轮,如何用css实现一个div的左右半圆凹陷,并且凹陷的地方显示父div的背景图...
时间: 2024-02-23 13:00:27 浏览: 19
可以使用CSS3的伪元素和圆角属性来实现这个效果。具体步骤如下:
1. 给父div设置背景图片,同时设置position: relative;
2. 给父div添加一个伪元素,设置position: absolute; top: 0; bottom: 0; left: 0; right: 50%;
3. 给伪元素添加border-top-right-radius: 50%; border-bottom-right-radius: 50%; background-color: 父div的背景色;
4. 添加一个子div,设置position: absolute; top: 0; bottom: 0; left: 50%; right: 0;
5. 给子div添加border-top-left-radius: 50%; border-bottom-left-radius: 50%; background-color: 父div的背景色;
6. 在子div的左右两个圆形区域分别添加一个伪元素,将伪元素的背景色设置为transparent,同时设置border-top-left-radius和border-bottom-left-radius或border-top-right-radius和border-bottom-right-radius为0,这样就可以让凹陷的地方显示父div的背景图了。
具体的CSS代码如下:
```css
.parent {
background-image: url("父div的背景图");
position: relative;
width: 500px;
height: 200px;
}
.parent::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 50%;
border-top-right-radius: 50%;
border-bottom-right-radius: 50%;
background-color: 父div的背景色;
}
.child {
position: absolute;
top: 0;
bottom: 0;
left: 50%;
right: 0;
background-color: 父div的背景色;
border-top-left-radius: 50%;
border-bottom-left-radius: 50%;
}
.child::before,
.child::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
width: 50%;
background-color: transparent;
}
.child::before {
left: 0;
border-top-left-radius: 50%;
border-bottom-left-radius: 50%;
}
.child::after {
right: 0;
border-top-right-radius: 50%;
border-bottom-right-radius: 50%;
}
```