Open In App
Related Articles

How to add Box-Shadow to The Clip-Path Object ?

Improve Article
Improve
Save Article
Save
Like Article
Like

As we all know that we can apply the shadow using the Box-Shadow attribute of CSS, but it is not valid if we apply it on the 
clipped Object using Clip-Path() function of CSS.

Approach:

  • We are going to create two divs, one for the main and the other for our clipped shape.
  • Then we are going to use the drop-shadow() function to apply shadow effects.

HTML Code:

  • Firstly, create an HTML file (index.html).
  • Now after the creation of our HTML file, we are going to give a title to our webpage using the 
    <title> tag. It should be placed between the <head> tag.
  • Then we link the CSS file that provides all the background images to our HTML. This is also placed in 
    between the <head> tag.
  • Coming to the body section of our HTML code.
    • Firstly, create a main div as the main box.
    • In that div, add 1 more div to add the clip-path object.

Example: In this example, we are implementing the above-explained steps.

HTML




<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
 
<body>
    <div class="main_box">
        <div class="img"></div>
    </div>
</body>
</html>


CSS Code: The following is the content for the “style.css” file used in the above code. CSS is used to give different types of animations and
effects to our HTML page so that it looks interactive to all users. Consider the following points:

  • Restore all the browser effects.
  • Use classes and IDs to give effects to HTML elements.

Style.css

CSS




.main_box {
    filter: drop-shadow(1.25em .75em 0px rgb(150, 223, 150));
}
 
.img {
    border-radius: 1em;
    width: 15em;
    height: 15em;
    clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 0% 0%);
    background-color: green;
}


Complete Code: Here we will combine the above two sections into one.

HTML




<!DOCTYPE html>
<html lang="en">
<head>
  <style>
    .main_box{
        filter: drop-shadow(1.25em .75em 0px rgb(150, 223, 150));
    }
 
    .img{
        border-radius: 1em;
        width: 15em;
        height: 15em;
        clip-path: polygon(75% 0%, 100% 50%,75% 100%,0% 100%,0% 0%);
        background-color: green;
    }
  </style>
</head>
   
<body>
    <div class="main_box">
        <div class="img"></div>
    </div>   
</body>
</html>


Output:


Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out - check it out now!

Last Updated : 10 May, 2023
Like Article
Save Article
Similar Reads
Related Tutorials