前端队长の技术博客
如何创建如下的div左下角和右下角为阴影的样式？
仅使用 div 的 before 和 after 就可以搞定。
首先，我创建了一个div元素：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body {
background-color: #eee;
}
div {
width: 500px;
height: 200px;
background-color: #fff;
margin: 100px auto;
font-size: 30px;
box-sizing: border-box;
padding: 20px;
position: relative;
}
</style>
</head>
<body>
<div>
Hello, I'm Daotin.
</div>
</body>
</html>
然后我为这个div 添加 :before和:after 伪元素，每个宽度均为为 50％ （为了便于看清，我设置了不同的颜色）
div:before,
div:after {
content:'';
display: block;
width: 50%;
height: 200px;
position: absolute;
top: 0;
}
div:before {
left: 0;
background-color: #aaa;
transform: skewY(-3deg);
}
div:after {
right: 0;
background-color: #ccc;
transform: skewY(3deg);
}
然后将两个伪元素在Y轴上稍微进行翻转得到如下样式：
div:before {
left: 0;
background-color: #aaa;
transform: skewY(-3deg);
}
div:after {
right: 0;
background-color: #ccc;
transform: skewY(3deg);
}
接下来，我将添加z-index: -1到伪元素以将其移到其父元素的后面。
完成后，我将执行以下操作：
- 添加
filter: blur - 添加了从透明到黑色的渐变（以隐藏其父级顶部中心的伪元素边缘）
最终的代码
div:before,
div:after {
content:'';
display: block;
width: 50%;
height: 200px;
position: absolute;
top: 0;
z-index: -1;
filter: blur(3px);
background: linear-gradient(to bottom, transparent, #989898);
}
div:before {
left: 0;
transform: skewY(-3deg);
}
div:after {
right: 0;
transform: skewY(3deg);
}
（完）