Design polygon shape using CSS

Question

I want to design following shape using CSS. I don't want to use svg or canvas for this.

How can I design it. Any help would be greatly appreciated.

Answer 1

You can divide whole background in different parts and draw each with :before and :after pseudo element.

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

you can do that using 3 <div> tags

• initially create a larger div
• then create two smaller div with absolute position and set their background white

#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>