Design polygon shape using CSS - html

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>