html - 使用CSS设计多边形形状

我想使用CSS设计以下形状。我不想为此使用svg或canvas。



我该如何设计。任何帮助将不胜感激。

最佳答案

您可以将整个背景划分为不同的部分，并分别使用:before和:after伪元素进行绘制。

HTML：

<div class="box">
  <div class="holder">
     // content will go here...
  </div>
</div>

* {box-sizing: border-box;}
body {
  background: linear-gradient(orange, red);
  min-height: 100vh;
  margin: 0;
}
.box {
  position: relative;
  overflow: hidden;
  padding: 10px;
  width: 250px;
  height: 300px;
  margin: 20px;
}

.box:before {
  position: absolute;
  background: green;
  border: 2px solid black;
  z-index: -1;
  content: '';
  bottom: 0;
  top: 20px;
  right: 0;
  left: 0;
}

.box:after {
  border: solid black;
  border-width: 2px 0 0 2px;
  position: absolute;
  background: green;
  height: 30px;
  content: '';
  right: 50px;
  z-index: -1;
  left: 0;
  top: 0;
}

.holder:before {
  border-top: 2px solid black;
  margin: -10px 14px 0 25px;
  transform: rotate(52deg);
  transform-origin: 0 0;
  background: green;
  float: right;
  height: 30px;
  content: '';
  width: 26px;
}

<div class="box">
  <div class="holder">
    Lorem ipsum dolor sit sit amet, dolor sit sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet ...
  </div>
</div>