Diagonal background with shadow

user_3700028 0
Viewed 283

I am trying to draw a diagonal shadow on a block, this is what I want :

Example Layout

Draw a regular block with shadow and stick is not a problem, here is what I have done for now : 

body {
  background: #EDF0F4;
}

.content-block {
  position: relative;
  background: white;
  padding: 16px;
  margin: 32px;
  box-shadow: -7px 8px 16px 0 rgba(55,70,95,0.07);
  border-radius: 8px;
  height: 200px;
}

.content-block:before {
      content: '';
      height: 70px;
      width: 12px;
      background: linear-gradient(332.97deg, #54EFAD 0%, #23FCCA 100%, #1AFFD8 100%);
      position: absolute;
      right: 0;
      top: 0;
      border-top-right-radius: 8px;
      border-bottom-left-radius: 8px;
    }
        <div class="content-block">
        
        </div>

I have tried to search how to draw the right border in diagonal, but without success, most of answer does not include shadow.

css
2 Answers

You could use transform:skew(), but any child content would also be transformed.

You could skew child content back into the other direction though.

body {
  background: #EDF0F4;
}

.content-block {
  position: relative;
  background: white;
  padding: 16px;
  margin: 32px;
  box-shadow: -7px 8px 16px 0 rgba(55, 70, 95, 0.07);
  border-radius: 8px;
  height: 200px;
  transform: skewX(-10deg);
}

.content-block:before {
  content: '';
  height: 70px;
  width: 12px;
  background: linear-gradient(332.97deg, #54EFAD 0%, #23FCCA 100%, #1AFFD8 100%);
  position: absolute;
  right: 0;
  top: 0;
  border-top-right-radius: 8px;
  border-bottom-left-radius: 8px;
}

.content-block>* {
  transform: skewX(10deg);
}
<div class="content-block">
  <p>test content</p>
  <p>test content</p>
  <p>test content</p>
  <p>test content</p>
  <p>test content</p>
</div>

Depending on where you need the shadow to be and what needs to be inside the shape, you could use a ::before or ::after psuedo element

body {
  background: #edf0f4;
}

div {
  width: 200px;
  height: 100px;
  background: white;
  margin: 15px;
  position: relative;
  margin-left: 50px;
  border-radius: 8px;
  box-shadow: -7px 8px 16px 0 rgba(55, 70, 95, 0.7);
}

div:after {
  content: "";
  position: absolute;
  background: white;
  top: 0;
  right: -20px;
  bottom: 0;
  width: 50px;
  transform: skew(-10deg);
  border-radius: 8px;
}

div:before {
  content: "";
  height: 70px;
  width: 12px;
  background: linear-gradient( 332.97deg, #54efad 0%, #23fcca 100%, #1affd8 100%);
  position: absolute;
  right: -23px;
  top: 0;
  border-bottom-left-radius: 8px;
  border-top-right-radius: 8px;
  z-index: 1;
  transform: skew(-10deg);
}
<div></div>

user_53853810

You can consider skew on pseudo element and drop-shadow filter:

body {
  background: #EDF0F4;
}

.content-block {
  position: relative;
  background: white;
  padding: 16px;
  margin: 32px 100px 32px 32px;
  filter:drop-shadow(-7px 8px 16px  red);
  border-radius: 8px 0 0 8px ;
  height: 200px;
}

.content-block:before {
  content: '';
  position: absolute;
  width: 100px;
  top:0;
  bottom:0;
  left:100%;
  background: 
    /*To simulate the radius of the gradient*/
    radial-gradient(farthest-side at top right,transparent 98%,#fff 100%) top 62px right 4px /8px 8px no-repeat,
    /**/
    linear-gradient(332.97deg, #54EFAD 0%, #23FCCA 100%, #1AFFD8 100%) top right/12px 70px no-repeat,
    #fff;
  border-radius:0 8px 8px 0;
  transform:skew(-20deg);
  transform-origin:top;
}
<div class="content-block">

</div>

user_86203330
Related