CSS-绘制带有圆角的矩形作为背景

Question

Is any ways to make this figure with only html & css?

Answer 1

Almost the same solution as @pedram, but using pseudo element in order to avoid inverse skewing the content inside the div (if there will be a content) :

 div.content { width: 200px; height: 200px; position:relative; padding:20px; box-sizing:border-box; } div.content:before { content:""; position:absolute; background: #ff8f00; border-radius: 15px; transform: skew(-5deg); top:0; left:0; right:0; bottom:0; z-index:-1; ] 

 <div class="content"> lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume </div> 

Answer 2

You should use transform skew like below, and your shape called Parallelogram

 div { width: 200px; height: 200px; background: #ff8f00; border-radius: 15px; transform: skew(-5deg); /* OR transform: skew(-190deg); */ position: relative; left: 20px; top: 10px; } 

 <div> </div>