CSS：繪制傾斜的邊框

Question

我正在為我的朋友做網站，但現在我不知道如何在CSS中繪制內容。

我要這個

我知道如何在“ AKTUELNO”中繪制此圖形，但是我不知道如何創建寬度和偏斜的底邊框。 抱歉，如果我對您的解釋不是很好，但是看到照片后您會明白的。

我希望你能幫助我:)

Answer 1

我使用漸變的解決方法建議：

 html { height: 100%; background-image: linear-gradient(pink, white); } *, *::before, *::after { box-sizing: border-box; } div { height: 150px; 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可以實現可靠的解決方案。