html - CSS:绘制倾斜的边框

Question

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

I want this

我知道如何在“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 可以实现稳健的解决方案。