.quadrilateral { background-color: red; height: 50px; margin: 60px; position: relative; width: 300px; } .quadrilateral::before { background-color: red; content: ''; display: inline-block; height: 61px; position: absolute; right: -3px; top: -11px; transform: skewX( -5deg ); -ms-transform: skewX( -5deg ); -webkit-transform: skewX( -5deg ); -o-transform: skewX( -5deg ); -moz-transform: skewX( -5deg ); width: 10px; } .quadrilateral::after { background-color: red; content: ''; display: inline-block; height: 15px; position: absolute; top: -6px; transform: skewY( -2deg ); -ms-transform: skewY( -2deg ); -webkit-transform: skewY( -2deg ); -o-transform: skewY( -2deg ); -moz-transform: skewY( -2deg ); width: 300px; }