如何使頂部和底部的元素髮生變形

Question

css頂部和底部的元素如何變形？我不想爲此使用background-image。

Answer 1

.box { 
 
    background: #363742; 
 
    position: relative; 
 
    overflow: hidden; 
 
    height: 200px; 
 
} 
 

 
.box:before, 
 
.box:after { 
 
    border-radius: 1000px/50px; 
 
    position: absolute; 
 
    background: #fff; 
 
    height: 80px; 
 
    content: ''; 
 
    right: -50px; 
 
    left: -50px; 
 
    top: -50px; 
 
} 
 

 
.box:after { 
 
    bottom: -50px; 
 
    top: auto; 
 
}

<div class="box"></div>