Css

Question

有什么方法可以只用 html 和 css 来制作这个数字吗？

Answer 1

你应该像下面这样使用 transform skew，你的形状叫做 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>

Answer 2

与@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>

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

Css - Draw rectangle with rounded corners as background

html

css-shapes