JSFiddle - React, Tailwind, and code Playground

by techtiger255

HTML

<div class="my_corner">
    Hello world!
</div>

CSS

.my_corner {
    position: relative;
    margin: 10px;
    width: 200px;
    height: 200px;
    padding: 20px;
    background-color: #ccc;
}

.my_corner .tl, .my_corner .tr,
.my_corner .bl, .my_corner .br {
    width: 0; 
    height: 0;
    position: absolute;        
}

.my_corner .tl {
    top: 0;
    left: 0;
    border-top: 15px solid white; 
    border-right: 15px solid transparent;
}
.my_corner .tr {
    top: 0;
    right: 0;
    border-top: 15px solid white; 
    border-left: 15px solid transparent;
}
.my_corner .bl {
    bottom: 0; 
    left: 0; 
    border-bottom: 15px solid white; 
    border-right: 15px solid transparent; 
}
.my_corner .br {
    bottom: 0;
    right: 0;
    border-bottom: 15px solid white; 
    border-left: 15px solid transparent;
}

JavaScript

/* $('.my_corner').prepend('<div class="tr"></div>')
               .prepend('<div class="tl"></div>')
               .prepend('<div class="br"></div>')
               .prepend('<div class="bl"></div>'); */