JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
  <img src="http://www.remodelaholic.com/wp-content/uploads/2015/01/David-Rumsey-world-map.jpg" alt="" class="map">
  <div class="contact"></div>
</div>

CSS

.wrapper {
  width: 900px;
  height: 400px;
  overflow: hidden;
}
.map {
  height: 400px;
  display: inline-block;
}
.contact {
  width: 200px;
  height: 100%;
  background: navy;
  display: inline-block;
  position: relative;
}
.contact::before {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  left: -120px; /* border-width * 2 */
  border-width: 200px 60px; /* height/2 */
  border-color: transparent;
  border-style: solid;
  border-right-color: green;
  border-top-color: green;
}