Css - Zeichnen Rechteck mit abgerundeten Ecken als Hintergrund

Question

Gibt es irgendwelche Möglichkeiten, diese Figur mit nur HTML & CSS zu machen?

Answer 1

Fast die gleiche Lösung wie @pedram, aber Element mit Pseudo, um zu vermeiden, inverse skewing der Inhalt innerhalb der div (wenn es einen Inhalt geben wird):

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

Sie transform skew wie unten verwenden sollten, und Ihre Form genannt 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>