<div class="wrap-clip">
				  <div class="wrap-clip-point">
					    <div class="axis axis-x">X-axis
      <span>&#8594;</span>
    </div>
				    	<div class="axis axis-y">Y-axis
      <span>&#8595;</span>
    </div>
				
    <div class="element-wrap">
						      <div class="clip-point clip-x1y1">x, y1</div>
						      <div class="clip-point clip-x2y2">x2 y2</div>
						      <div class="clip-point clip-x3y3">x3 y3</div>
						      <div class="clip-point clip-x4y4">x4 y4</div>
						      <img class="element" src="http://karenmenezes.com/shapes-polygon/clip-demo-img.jpg" alt="demo-clip-path-coordinates" width="550">		
					    </div>			
				  </div>	
</div> <!-- /wrap-clip -->

				<svg class="clip-svg">
					  <defs>
						    <clipPath id="clip-demo-basic" clipPathUnits="objectBoundingBox">
							      <polygon points="0.5 0, 0.9 0.1, 0.9 0.9, 0.1 0.9" />
						    </clipPath>
					  </defs>
				</svg>	
body {
  font-family: "Roboto Condensed", sans-serif;
  margin: 0;
  padding: 0;
}

.wrap-clip {
  padding-left: 60px;
}

.element-wrap {
  background: #f5f0f5;
  display: inline-block;
  position: relative;
}

.element-wrap:before {
  content: "";
  position: absolute;
  top: -20px;
  bottom: -20px;
  width: 4px;
  background: crimson;
  z-index: 1;
}

.element-wrap:after {
  content: "";
  position: absolute;
  top: 0px;
  left: -20px;
  right: -20px;
  height: 4px;
  background: crimson;
  z-index: 1;
}

.element {
  -webkit-clip-path: polygon(50% 0%, 90% 10%, 90% 90%, 10% 90%);
  clip-path: polygon(50% 0%, 90% 10%, 90% 90%, 10% 90%);
  -webkit-clip-path: url("#clip-demo-basic");
  clip-path: url("#clip-demo-basic");
  display: block;
}

.clip-point {
  position: absolute;
  background: black;
  color: white;
  text-align: center;
  font-size: 11px;
  padding: 2px;
  z-index: 1;
}

.clip-x1y1 {
  left: 50%;
  top: 0;
}

.clip-x2y2 {
  left: 90%;
  top: 10%;
}

.clip-x3y3 {
  left: 90%;
  top: 90%;
}

.clip-x4y4 {
  left: 10%;
  top: 90%;
}

.axis {
  color: crimson;
  font-size: 14px;
  position: relative;
}

.axis span {
  font-size: 20px;
  line-height: 1;
}

.axis-x {
  top: 17px;
  left: 0px;
  padding-left: 8px;
}

.axis-y {
  top: 24px;
  left: -48px;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.