CSS：绘制歪斜的边界

Question

我正在为我的朋友做网站，现在我不知道如何在CSS中绘制东西。

I want this

我知道如何在“AKTUELNO”得出这样的，但我不知道如何创建具有更长的宽度和倾斜的侧面是底部边框。对不起，如果我没有很好地解释你，但是当你看到照片时你会明白。

我希望你能帮助我:)

Answer 1

使用我的解决办法的建议梯度：

html { 
 
    height: 100%; 
 
    background-image: linear-gradient(pink, white); 
 
} 
 

 
*, *::before, *::after { 
 
    box-sizing: border-box; 
 
} 
 

 
div { 
 
\t height: 150px; 
 
\t width: 300px; 
 
    margin-left: 50px; 
 
    border-top: 1px solid black; 
 
    border-bottom: 1px solid black; 
 
} 
 

 
div::before, div::after { 
 
    content: ''; 
 
    display: block; 
 
    height: 149px; 
 
    width: 50px; 
 
} 
 

 
div::before { 
 
    float: left; 
 
    margin-left: -50px; 
 
    background-image: linear-gradient(-71.5deg, transparent, transparent 47px, black 47px, black 48px, transparent 48px), 
 
        linear-gradient(to top, black, black 1px, transparent 1px); 
 
    
 
} 
 

 
div::after { 
 
    float: right; 
 
    margin-right: -50px; 
 
    background-image: linear-gradient(71.5deg, transparent, transparent 47px, black 47px, black 48px, transparent 48px), 
 
        linear-gradient(to top, black, black 1px, transparent 1px);; 
 
}

<div></div>

这里是我尝试采用，是由提到的解决方案@ Harry：

body { 
 
    background: lightblue; 
 
} 
 
.container { 
 
    position: relative; 
 
    width: 75%; 
 
    margin: 0 auto; 
 
    background: rgba(100,100,100,.15); 
 
    height: 300px; 
 
    text-align: center; 
 
    line-height: 300px; 
 
    font-size: 3em; 
 
} 
 
.container::after { 
 
    position: absolute; 
 
    display: block; 
 
    content: ''; 
 
    width: 100%; 
 
    height: 95%; 
 
    top: -2.5%; 
 
    padding: 0 50px; 
 
    margin-left: -50px; 
 
    border: 1px solid black; 
 
    -webkit-transform: perspective(50px) rotateX(2deg); 
 
    -moz-transform: perspective(50px) rotateX(2deg); 
 
    transform: perspective(50px) rotateX(2deg); 
 
}

<div class='container'> 
 
    Content Goes Here 
 
</div>

但我认为，强大的解决方案可以通过使用SVG实现。