<div class="wrapper">
<div class="textarea">
<p>congratulations!</p>
<div class="tri right-triangle"></div>
<div class="tri left-triangle"></div>
<div class="excess-right"></div>
<div class="excess-left"></div>
<div class="tri top-right"></div>
<div class="tri top-left"></div>
<div class="tri bottom-right"></div>
<div class="tri bottom-left"></div>
</div>
</div>
body {
background: #37C5DB;
}
.wrapper {
padding:50px;
}
.textarea {
background: #fff;
color: black;
width: 70%;
display: block;
height: 100px;
position: relative;
/* z-index: 1000; */
margin: 0 auto;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
}
.textarea p {
padding: 30px;
text-align: center;
z-index: 101;
font-family: Helvetica;
font-size: 30px;
}
.tri {
width: 0;
height: 0;
border-style: solid;
position: absolute;
}
.left-triangle {
border-width: 30px 0 0 70px;
border-color: transparent transparent transparent #555;
top: -30px;
right: 0px;
z-index: 99;
}
.right-triangle {
border-width: 0 0 30px 70px;
border-color: transparent transparent #555 transparent;
top: -30px;
left: 0px;
z-index: 99;
}
.excess-right {
height: 100px;
width: 100px;
background: black;
position: absolute;
top: -33px;
right: -30px;
z-index: -100;
border-top-left-radius: 3px
}
.excess-left {
height: 100px;
width: 100px;
background: black;
position: absolute;
top: -33px;
left: -30px;
z-index: -100;
border-top-right-radius: 3px;
}
.top-right {
border-width: 49px 50px 0 0;
border-color: black transparent transparent transparent;
top: -33px;
right: -80px;
}
.bottom-right {
border-width: 49px 0 0 50px;
border-color: transparent transparent transparent black;
top: 18px;
right: -80px;
}
.top-left {
border-width: 0 50px 49px 0;
border-color: transparent black transparent transparent;
top: -33px;
left: -80px;
}
.bottom-left {
top: 18px;
left: -80px;
border-width: 0 0 49px 50px;
border-color: transparent transparent black transparent;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.