如何像下面的图片一样创建一个倾斜的矩形

Question

我在用figma创建线框后建立了我的网站，但是现在我在编码这个用于大多数标题/页面标题的斜矩形时遇到了问题。我在网上看到了几个仅使用单面倾斜的示例，但我的情况在两面都是倾斜的。

图片

Answer 1

除倾斜的矩形部分外，其他所有内容均正确。我添加了偏斜变换属性，该属性将按预期生成输出。

 .block {
    display: flex;
    justify-content: center;
    transform: translateY(3.3rem);
}
.line {
    transform: translateY(5rem);
    border: 1px solid black;
}
.subscribe {
    width: 200px;
    height: 50px;
    background-color: black;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5rem;
    font-style: italic;
    transform: skew(-20deg);
    text-transform: uppercase;
}

<div class="line"></div>
<div class="block">
    <div class="subscribe">Subscribe</div>
</div>