使用CSS设计多边形形状

Question

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

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

Answer 1

您可以在不同的部分划分整个背景，并使用: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>

Answer 2

你可以使用3 <div>标签

来做到这一点

• 最初创建一个更大的div
• 然后创建两个具有绝对位置的较小div并将其背景设置为白色

#border{
  position:relative;
  width:300px;
  height:200px;
  border:3px solid #000;
  box-shadow:0px 0px 1px 3px #3dd7cf;
  background:#304e4b;
  border-bottom-width:5px;
  
  }
#triangle{
  position: absolute;
    top: -31px;
    right: 7px;
    width: 50px;
    height: 50px;
    background: #fff;
    border-bottom: 3px solid #3dd7cf;
    transform: rotate(45deg);
    box-shadow: 0px 2px 0px 0px #000;
   z-index:990;
  overflow:hidden;
  }
#sqr{
  position: absolute;
    top: -22px;
    right: -7px;
    width: 40px;
    height: 50px;
    border-bottom: 4px solid #3dd7cf;
    box-shadow: 0px 2px 0px 0px #000;
    background: #fff;
    z-index: 999;
  }

<div id="border"> 
<div id="triangle"></div>
<div id="sqr"></div>
</div>