css - 如何使用剪辑路径或任何其他方式在 css 中创建以下形状
问题描述
我正在尝试实现这种形状,但无法获得预期的结果。我在引导轮播中使用它
以下是我到目前为止所得到的
div {
height:300px;
width:350px;
background: #414141;
clip-path: polygon(0 10%, 100% 23%, 100% 90%, 0% 100%);
filter: drop-shadow(30px 10px 4px #2ec);
}
<div>hello</div>
解决方案
我的尝试
figure {
position: relative;
perspective: 600px;
border: 0;
margin: 50px;
width: 400px;
height: 300px;
display: inline-block;
}
img {
margin: 10px 0 0 15px;
border: 2px gold solid;
width: inherit;
height: inherit;
position: absolute;
z-index: 2;
border-radius: 40px;
transform: rotateY(20deg) rotateZ(-2deg);
}
figure::before {
content: "";
display: block;
position: absolute;
z-index: 1;
left: -8px;
top: 15px;
border-radius: 40px;
transform: rotateY(5deg) rotateZ(4deg) scale(.95);
height: inherit;
width: inherit;
background: #ccc;
}
<figure>
<img src="https://i.stack.imgur.com/UJ3pb.jpg" alt="a cute cat" />
</figure>
最后结果
推荐阅读
- hadoop - HIVE INSERT INTO 因命名空间配额问题而失败
- scala - 基于泛型的重载方法
- dart - 类'未来
' 没有实例 getter 'length' - javascript - React App:EventSource 的响应具有不是“text/event-stream”的 MIME 类型(“application/json”)。中止连接
- arrays - 试图从嵌套数组中访问值
- r - 标准化变量的问题
- php - 如何将我的 URL 行输出为超链接 (PHP)?
- sockets - 创建一个 tls websocket 连接
- php - 我尝试了很多次如何解决这个问题?
- node.js - Firebase 函数引发无法捕获的错误