CODEWITHSUNDEEP
htmlcssshadow
Sophvy
Sophvy

Reputation: 43

How to create a box with cut off corner and shadow? (Boxed Website design)

I'm working on a website and I need to cut off the top left corner of the main body. After that I want to apply a shadow on the main body. This shadow should not go around the original box it should follow the main body with the new cut off corner - I used drop-shadow for this.

I tried using gradient background but no matter what I try my header is either overlapping the main body or the shadows don't work

My current attempt is this: https://codepen.io/Sophvy/pen/MWgMZzG

HTML:

<div id ="main1">
  <div id ="wrap"></div>
  <header>

  </header>
  <main>
  </main>

</div>

CSS:


#main1 {
  height:500px;
  width:500px;
  position:relative;
}
#wrap {
  width:500px;
  height:500px;
  background: linear-gradient(135deg, transparent 70px,green 0);
  filter: drop-shadow(0px 0px 10px blue);
  position:absolute;
}

header {
  height:55px;
  max-width:100%;
  background-color:#eee;
  position: relative;
}

My Issue here is that the header doesn't get cut off so its just overlapping. I tried using z-index but couldn't get it to work even with position:absolute / relative on each element. I looked at a lot of different ideas but I haven't found any that handle the same problem that I'm having with my header.

What do I need to change to cut off the corner of the main body and the header, and then afterwards get a working shadow?

EDIT: my solution

HTML:


<div id="background">
  <div id ="main1">
    <div id ="wrap">
      <header>
        header
      </header>
      <main>
      main
      </main>
    </div>
  </div>
</div>

CSS: 

#background {
  height:500px;
  width:600px;
  padding-top: 5px;
  background-color:#bbb;
  padding-bottom: 5px;
}

#main1 {
  margin: 10px auto;
  width: 90%;
  height:400px;
  text-align:right;
  filter: drop-shadow(0px 0px 10px blue); 
}
#wrap {
  width:500px;
  height:500px;
  background: linear-gradient(135deg, transparent 70px,green 0);
  clip-path: polygon(25% 0, 100% 0, 100% 100%, 0 100%, 0 25%);
  position:absolute;
}

header {
  height:55px;
  max-width:100%;
  background-color:#eee;
  position: relative;
}

Upvotes: 4

Views: 1126

Answers (1)

Janis Jansen
Janis Jansen

Reputation: 1025

You where very close!

If you use a clip-path you can cut both the header and the main part of the box. When you then set the drop-shadow filter on the main element you should get the desired style.

#main1 {
  height:500px;
  width:500px;
  filter: drop-shadow(0px 0px 10px blue);
}
#wrap {
  width:500px;
  height:500px;
  background: linear-gradient(135deg, transparent 70px,green 0);
  clip-path: polygon(25% 0, 100% 0, 100% 100%, 0 100%, 0 25%);
  position:absolute;
}

header {
  height:55px;
  max-width:100%;
  background-color:#eee;
  position: relative;
}
<div id ="main1">
  <div id ="wrap">
    <header>
    </header>

    <main>
    </main>
  </div> 
</div>

Upvotes: 2

Related Questions