是否可以在帶有純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的陰影框中創建凹槽？

回答

相關問題