Pure CSS div achieve a seamless sharp box

We did not talk much direct effect on the first map

 

In fact, very simple principle, that is a box with a border plus a black triangle and a white triangle, last accomplished by locating position.

code show as below:

HTML to a div

<div></div>

CSS

 div{
            position: relative;
            width: 200px;
            height: 100px;
            border: 2px solid #000;
            margin-top:100px;
       }
       div::before,div::after{
            display: inline-block;
            content:'';
            position: absolute;
            border: 20px solid transparent;
       }
       div::before{
            left: 60px;
            top: -42px;
            border-bottom-color:#000;
       }
       div::after{
            left: 60px;
            top: -39px;
            border-bottom-color:#fff;
       }