CodePen

HTML

            
              <div class="box">
  <div class="tri"></div>
  
  helo
</div>
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              .box { position:relative; background:rgba(0,0,0,0.8); margin:60px auto; height:170px; width:170px; border:solid 1px #999; border-radius:3px; border-top:0; box-shadow:5px 5px 10px -5px #000, -5px 5px 10px -5px #000; }

.box:before { content:''; position:absolute; border-top-left-radius:3px; width:80%; height:100%; border-top:solid 1px #999; }

.box:after { content:''; position:absolute; right:0; border-top-right-radius:3px; width:10%; height:100%; border-top:solid 1px #999; }

.tri { position:absolute; width:10%; height:30px; left:80%; top:-30px; overflow:hidden; }

.tri:before { content:''; position:absolute; left:50%; margin-left:-12px; bottom:-20px; transform:rotate(55deg) skew(20deg); width:25px; height:20px; background:rgba(0,0,0,0.8); border:solid 1px #ccc; border-radius:3px; }


* { box-sizing:border-box; }

body { background: 
radial-gradient(circle, transparent 20%, #6d8eb6 20%, #6d8eb6 80%, transparent 80%, transparent),
radial-gradient(circle, transparent 20%, #6d8eb6 20%, #6d8eb6 80%, transparent 80%, transparent) 50px 50px,
linear-gradient(#aec7e6 8px, transparent 8px) 0 -4px,
linear-gradient(90deg, #aec7e6 8px, transparent 8px) -4px 0;
background-color: #6d8eb6;
background-size:100px 100px, 100px 100px, 50px 50px, 50px 50px; }



            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................