CSS 3 形状:倒圆角"tunnel-like style"
CSS 3 Shape: inverted rounded corner "tunnel-like style"
我想创建一个类似隧道的 div,它有倒圆边框
如您所见,它从左到右有一个 'expanding tunnel effect'。理想情况下,方格背景是透明的,但如果那不可能,我也许可以让它与纯色背景一起使用。
谁能帮我创建这个 css3 形状?希望有一个我可以玩的 jsfiddle?
谢谢!
这可以使用 :before
和 :after
伪元素创建:
- 背景颜色提供
box-shadow
颜色,允许形状的顶部和底部透明
曲线是用 border-radius
创建的,如下所示:
(红色区域透明)
完整示例
div {
height: 300px;
width: 200px;
position: relative;
overflow: hidden;
}
div:before {
top: -60px;
border-bottom: solid #EEE;
border-right: solid #EEE;
border-radius: 0 0 60% 0;
box-shadow: 50px 10px 0 60px #F90;
}
div:after {
bottom: -60px;
box-shadow: 50px 10px 0 60px #F90;
border-radius: 0 60% 0 0;
border-top: solid #EEE;
border-right: solid #EEE;
}
div:before,
div:after {
content: '';
position: absolute;
width: 100%;
height: 160px;
right: 0;
border-width: 3px;
}
<div></div>
我想创建一个类似隧道的 div,它有倒圆边框
如您所见,它从左到右有一个 'expanding tunnel effect'。理想情况下,方格背景是透明的,但如果那不可能,我也许可以让它与纯色背景一起使用。
谁能帮我创建这个 css3 形状?希望有一个我可以玩的 jsfiddle?
谢谢!
这可以使用 :before
和 :after
伪元素创建:
- 背景颜色提供
box-shadow
颜色,允许形状的顶部和底部透明 曲线是用
border-radius
创建的,如下所示:(红色区域透明)
完整示例
div {
height: 300px;
width: 200px;
position: relative;
overflow: hidden;
}
div:before {
top: -60px;
border-bottom: solid #EEE;
border-right: solid #EEE;
border-radius: 0 0 60% 0;
box-shadow: 50px 10px 0 60px #F90;
}
div:after {
bottom: -60px;
box-shadow: 50px 10px 0 60px #F90;
border-radius: 0 60% 0 0;
border-top: solid #EEE;
border-right: solid #EEE;
}
div:before,
div:after {
content: '';
position: absolute;
width: 100%;
height: 160px;
right: 0;
border-width: 3px;
}
<div></div>