グラデーションとシャドウを使ってCSSボックスを作成する方法

Question

グラデーションとシャドウだけでなくCSSカーブボックスを作ろうとしています。 どのように私は純粋なCSSで作ることができ、それは多くのコードでは1つのdivにしかなければなりません。参考のため

は添付画像を参照してください -

Answer 1

ちょうどこの

のCss

div { 
width:200px; 
margin:auto; 
margin-top:20px; 
height:200px; 
background:red; 
border-radius:25px; 
box-shadow: inset 0 0 15px rgba(68,68,68,0.8);; 
position:relative; 
} 

div:beforae { 
content:""; 
position:absolute; 
border-left:15px solid blue; 
border-right:15px solid green; 
height:200px; 
border-radius:15px 0 0 15px; 
} 
​ 

HTML

などのボーダー半径であることを確認してください

<div></div>​ 

、今はあなたがこれまでに試したものを持っていますかデモhttp://jsfiddle.net/rohitazad/Vsvg2/74/