<div class = "wrapper">
  <div>
    <h2>Default</h2>
    <div class="shapes">
      <div class = "default"></div>
    </div>
  </div>
  <div>
    <h2>Clipped</h2>
    <div class="shapes">
      <div class = "example1"></div>
      <div class = "example2"></div>
      <div class = "example3"></div>
    </div>
  </div>
</div>
.wrapper{
  margin: 40px auto;
  max-width: 60em;
  font-family: Tahoma,sans-serif; 
}
.wrapper,
.shapes{
  display: flex;
  justify-content: space-around;
}
.wrapper>div{
  display: flex;
  flex-direction: column;
}
.shapes>div{
  width: 100px;
  height: 100px;
  background:orange;
  margin-right: 8px;  
}
.example1{
  clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%)
}
.example2{
  clip-path: polygon(50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 0% 60%, 10% 20%);  
}
.example3{
  clip-path: polygon(38% 34%, 100% 55%, 75% 100%, 0 100%);
  
}
  

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.