是否可以在带有纯CSS的阴影框中创建凹槽？

我目前正在努力寻求一种布局，我问自己，如果这可能与纯CSS或如果我必须使用图像。是否可以在带有纯CSS的阴影框中创建凹槽？

我想达到的目标是这样的：

notch in a box

所以<body>是黄色区域，而白框是一个面积排序切断<header>。阴影和圆角在这里是棘手的东西。

2013-04-18 acme

在标题内添加一个div，并给出position：absolute。根据你的模拟风格进行潜水。（我不能让底部曲线:(）

header { 
    background: white; 
    box-shadow: rgba(0, 0, 0, 0.4) 0 0 8px; 
    height: 100px; 
    position:relative 
} 
.curve{ 
    background: #fcf5e5; 
    border-radius:14px; 
    box-shadow: inset 1px 4px 8px -5px #333; 
    -moz-box-shadow: inset 1px 4px 8px -5px #333; 
    -webkit-box-shadow: inset 1px 4px 8px -5px #333; 
    height:60px; 
    width:250px; 
    position:absolute; 
    left:0; right:0; 
    margin:0 auto; 
    bottom:-9px 
}

DEMO

来源

2013-04-18 10:33:24 Sowmya

谢谢，这已经是一个更近了一步 - 但棘手的事情真的是圆的边界，这是必要这里:-( – acme

我更新了我的小提琴，我刚刚接近一点，但它仍然不完美。 – acme

是否可以在带有纯CSS的阴影框中创建凹槽？

回答

相关问题