对角背景与阴影

Question

我正在尝试在块上绘制对角阴影，这就是我想要的：

用阴影和棍子绘制常规块不是问题，这是我现在所做的：

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>

我试图搜索如何在对角线上绘制右边框，但没有成功，大多数答案都没有阴影。

Answer 1

您可以使用transform:skew()，但是任何子内容也将被转换。

您可以将子内容偏向另一个方向。

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>

根据所需的阴影位置和形状内部的位置，可以使用::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>

Answer 2

您可以考虑伪元素和阴影过滤器的偏斜：

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>