Css - 丸みを付けた四角形を背景として描く

Question

この図をhtmlで作成する方法はありますか& css？

あなたは以下のような transform skewを使用する必要があります

Answer 1

ほぼ同じソリューションと呼ばれるあなたの形状が、避けるために、擬似要素を使って逆スキュー div内のコンテンツ（コンテンツがある場合）：

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

、および@pedramなど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>