前端队长の技术博客

  1. 最终的代码

如何创建如下的div左下角和右下角为阴影的样式?

1

仅使用 div 的 beforeafter 就可以搞定。

首先,我创建了一个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>

2

然后我为这个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);
} 

3

然后将两个伪元素在Y轴上稍微进行翻转得到如下样式:

div:before {
    left: 0;
    background-color: #aaa;
    transform: skewY(-3deg);
}
div:after {
    right: 0;
    background-color: #ccc;
    transform: skewY(3deg);
} 

5

接下来,我将添加z-index: -1到伪元素以将其移到其父元素的后面。

6

完成后,我将执行以下操作:

最终的代码

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);
} 

(完)