菱形加box-shadow
时间: 2023-07-17 10:05:42 浏览: 41
您可以使用CSS的伪元素和box-shadow属性来创建一个带有菱形形状和阴影效果的元素。以下是一个示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<style>
.diamond {
position: relative;
width: 100px;
height: 100px;
background-color: #000;
transform: rotate(45deg);
margin: 50px;
}
.diamond::before, .diamond::after {
content: "";
position: absolute;
width: 100%;
height: 100%;
background-color: inherit;
}
.diamond::before {
top: -25px;
transform: rotate(-45deg);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
.diamond::after {
bottom: -25px;
transform: rotate(-45deg);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
</style>
</head>
<body>
<div class="diamond"></div>
</body>
</html>
```
这段代码会创建一个宽高为100px的菱形元素,并给它添加了一个45度的旋转。使用伪元素`::before`和`::after`来创建两个与菱形形状相同的元素,并通过`transform: rotate(-45deg)`来旋转它们。然后,使用`box-shadow`属性来给这两个伪元素添加阴影效果。您可以根据需要调整元素的大小和背景颜色来适应您的设计。
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)