我正在尝试在块上绘制对角线阴影,这就是我想要的:
用阴影和棍子绘制一个常规块不是问题,这是我现在所做的:
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>
我试图搜索如何在对角线处绘制右边框,但是没有成功,大多数答案都不包括阴影。
最佳答案
您可以考虑在伪元素和阴影过滤器上倾斜:
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>