How to create a Background image Clip-Path

Background image clip path

The clip-path property can reference an SVG graphics element or use a specified basic shapes as clipping path.

clip-path makes it easy to clip-out basic shapes using either of the polygon, ellipse, circle or inset keywords, which are part of the CSS exclusion module.
CSS Animations and transitions are possible with two or more clip-path shapes with the same number of points.

In this demo we are creating some shapes like triangle,trapezoid,parallelogram,rhombus.

Triangle

To create a Traingle we are using a property like clip-path: polygon(50% 0%, 0% 100%, 100% 100%).

.triangle{
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
.bc{
display:inline-block;
}
<div style="padding:30px;display:inline-block;">
  <div style="background-image:url(https://www.clovetech.com/uploads/slider/home/accelerating-digital-engineering1.jpg);padding:150px;" class="triangle bc">	    
  </div>
  <div style="background-image:url(https://www.clovetech.com/uploads/slider/home/accelerating-digital-engineering1.jpg);padding:150px;" class="triangle bc">	    
  </div>
  <div style="background-image:url(https://www.clovetech.com/uploads/slider/home/accelerating-digital-engineering1.jpg);padding:150px;" class="triangle bc">	    
  </div>
  <div style="background-image:url(https://www.clovetech.com/uploads/slider/home/accelerating-digital-engineering1.jpg);padding:150px;" class="triangle bc">	    
  </div>
</div>

Trapezoid

Clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%); is used to create trapezoid.

.trapezoid{
clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
}
.bc{
display:inline-block;
}
<div style="padding:30px;display:inline-block;">
  <div style="background-image:url(https://www.clovetech.com/uploads/slider/home/accelerating-digital-engineering1.jpg);padding:150px;" class="trapezoid bc">	    
  </div>
  <div style="background-image:url(https://www.clovetech.com/uploads/slider/home/accelerating-digital-engineering1.jpg);padding:150px;" class="trapezoid bc">	    
  </div>
  <div style="background-image:url(https://www.clovetech.com/uploads/slider/home/accelerating-digital-engineering1.jpg);padding:150px;" class="trapezoid bc">	    
  </div>
  <div style="background-image:url(https://www.clovetech.com/uploads/slider/home/accelerating-digital-engineering1.jpg);padding:150px;" class="trapezoid bc">	    
  </div>
</div>

parallelogram

To create a parallelogram we are using a property called clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%).

.parallelogram{
clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
}
.bc{
display:inline-block;
}
<div style="padding:30px;display:inline-block;">
  <div style="background-image:url(https://www.clovetech.com/uploads/slider/home/accelerating-digital-engineering1.jpg);padding:150px;" class="parallelogram bc">	    
  </div>
  <div style="background-image:url(https://www.clovetech.com/uploads/slider/home/accelerating-digital-engineering1.jpg);padding:150px;" class="parallelogram bc">	    
  </div>
  <div style="background-image:url(https://www.clovetech.com/uploads/slider/home/accelerating-digital-engineering1.jpg);padding:150px;" class="parallelogram bc">	    
  </div>
  <div style="background-image:url(https://www.clovetech.com/uploads/slider/home/accelerating-digital-engineering1.jpg);padding:150px;" class="parallelogram bc">	    
  </div>
</div>

Rhombus

And finally clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
is used to create rhombus.

.rhombus{
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
.bc{
display:inline-block;
}
<div style="padding:30px;display:inline-block;">
  <div style="background-image:url(https://www.clovetech.com/uploads/slider/home/accelerating-digital-engineering1.jpg);padding:150px;" class="rhombus bc">	    
  </div>
  <div style="background-image:url(https://www.clovetech.com/uploads/slider/home/accelerating-digital-engineering1.jpg);padding:150px;" class="rhombus bc">	    
  </div>
  <div style="background-image:url(https://www.clovetech.com/uploads/slider/home/accelerating-digital-engineering1.jpg);padding:150px;" class="rhombus bc">	    
  </div>
  <div style="background-image:url(https://www.clovetech.com/uploads/slider/home/accelerating-digital-engineering1.jpg);padding:150px;" class="rhombus bc">	    
  </div>
</div>

we are using another property is display :inline-block.
The clip-path property allows you to make complex shapes in CSS by clipping an element to a basic shape (circle, ellipse, polygon, or inset), or to an SVG source.

Amonge all this Polygon is the most flexible of all the available shapes because it allows you to specify any amount of points, a little bit like an SVG path.
You can also clip images into different shapes with this property and arrange them together in best ways with the help of a CSS.

Leave a Reply

Your email address will not be published. Required fields are marked *