<div class="clip-borders"></div>			
					
<svg class="clip-svg">
						  <defs>
							    <clipPath id="rhomboid-clip" clipPathUnits="objectBoundingBox">
								      <polygon points="0 1, 0.3 0, 1 0, 0.7 1" />
							    </clipPath>
						  </defs>	
					</svg>
				
.clip-borders {
  width: 100px;
  height: 100px;
  background-color: #639;
  background: rebeccaPurple;
  border: 4px solid #222;
  margin: 0 auto;
  -webkit-clip-path: polygon(0% 100%, 30% 0%, 100% 0%, 70% 100%);
  clip-path: polygon(0% 100%, 30% 0%, 100% 0%, 70% 100%);
  -webkit-clip-path: url("#rhomboid-clip");
  clip-path: url("#rhomboid-clip");
}

.clip-borders:hover {
  -webkit-clip-path: none;
  clip-path: none;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.