Css3 custom Shape

Question

I want same shape in css3 please help

I will try this

 .shape{ background:#000; width:150px; margin:50px; height:150px; color:#fff; border-radius:0 0 0px 25%; -ms-transform: rotate(20deg); /* IE 9 */ -webkit-transform: rotate(20deg); /* Safari */ transform: rotate(20deg); } 

 <div class="shape">magic</div> 

Answer 1

You can consider skew transformation like below:

 .box { margin-left:auto; width:300px; height:300px; border-radius:0 0 0 40px; transform:skewY(20deg); transform-origin:top right; position:relative; overflow:hidden; } .box:before { content:""; position:absolute; top:0; left:0; right:0; bottom:0; background:url(https://picsum.photos/800/600?image=1069) center/cover no-repeat; transform:skewY(-20deg); transform-origin:top right; } body { margin:0; } 

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