使用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>