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

Question

有没有办法只用html&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>