<div class="container"></div>
.container {  
  border: 1px solid #000;
  height: 200px;
  position: relative;
  width: 200px;
  border-top:none;
  border-left:none;
  border-bottom:none;
}

.container:after,
.container:before {
  border-left: 10px solid transparent;
  border-right: 10px solid transparent; 
  content: " ";
  right: -6px; 
  margin-top: -1px;
  position: absolute;
  transform: rotate(90deg); /* Equal to rotateZ(45deg) */
}

.container:before {
  border-top: 10px solid #000;
  top: 50%; 
  right:-5px;
}

.container:after {
  border-top: 10px solid #fff;
  top: 50%; 
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.