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

Question

有没有办法让这个数字只用html＆amp; CSS？

Answer 1

与@pedram几乎相同的解决方案，但使用伪元素以避免反向倾斜 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

您应该使用如下所示的transform skew，并将您的形状称为Parallelogram

＆＃13;

＆＃13;

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

＆＃13;

<div>
</div>

＆＃13;

＆＃13;

＆＃13;