如何使用CSS3设计有点弯曲的重叠式翻盖形状
马耶努尔伊斯兰教
我需要一个如下形状：
我使用一个容器和CSS3伪类制作了一个：
.overlay-flap {
width: 70px;
display: inline-block;
background-color: #fff;
-webkit-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.15);
-moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.15);
box-shadow: 0 2px 0 rgba(0, 0, 0, 0.15);
font-size: 14px;
text-align: center;
-webkit-border-radius: 0 0 10px 10px;
-moz-border-radius: 0 0 10px 10px;
-khtml-border-radius: 0 0 10px 10px;
border-radius: 0 0 10px 10px;
position: relative;
top: -10px;
}
.overlay-flap:before,
.overlay-flap:after {
content: "";
display: inline-block;
position: absolute;
top: -6px;
z-index: -1;
background-color: #fff;
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}
.overlay-flap:before {
width: 11px;
height: 23px;
-webkit-transform: rotate(-35deg) scale(1) skew(1deg) translate(0);
-moz-transform: rotate(-35deg) scale(1) skew(1deg) translate(0);
-o-transform: rotate(-35deg) scale(1) skew(1deg) translate(0);
-ms-transform: rotate(-35deg) scale(1) skew(1deg) translate(0);
transform: rotate(-35deg) scale(1) skew(1deg) translate(0);
left: -4px;
}
.overlay-flap:after {
width: 11px;
height: 23px;
-webkit-transform: rotate(35deg) scale(1) skew(1deg) translate(0);
-moz-transform: rotate(35deg) scale(1) skew(1deg) translate(0);
-o-transform: rotate(35deg) scale(1) skew(1deg) translate(0);
-ms-transform: rotate(35deg) scale(1) skew(1deg) translate(0);
transform: rotate(35deg) scale(1) skew(1deg) translate(0);
right: -4px;
}<div class="overlay-flap">content</div>我该如何以自己想要的方式来做，双方都有点弯曲？如果我们能坚持使用单个容器（HTML元素）会更好。
阿克沙伊
我用svg怎么样
<svg width="300" height="200">
<path d="m 20 20 q 30 15 30 30 l 0 100 h 150 v -100 q 0 -15 30 -30">如果您不想填写，请尝试此
<svg width="300" height="200">
<path d="m 20 20 q 30 15 30 30 l 0 100 h 150 v -100 q 0 -15 30 -30" fill="none" stroke="grey">本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
CSS3在响应式设计中使用重叠或并排定位
- 2
我如何使用jquery创建重叠式联系表单
- 3
使用css3的带有弯曲字幕的圆角图像
- 4
CSS重叠式关闭按钮响应
- 5
如何创建重叠式导航菜单？
- 6
带有文本的自适应透明重叠式css圆，垂直对齐并居中对齐
- 7
Topojson：如何在GIS软件中设计有效的多边形，线，点？
- 8
您如何定位核心重叠式广告？
- 9
如何使用css3动画为弯曲路径上的球设置动画？
- 10
如何使用纯CSS3创建此形状？
- 11
有没有一种方法可以使用CSS3将文本的底部或顶部弯曲/弧形/弯曲
- 12
使用CSS3创建角度形状
- 13
如何使用CSS3创建自定义形状以匹配此形状？
- 14
CSS3弯曲/透视效果
- 15
如何使用 3d 点弯曲平面
- 16
Android上的重叠式屏幕
- 17
视频重叠式广告未显示
- 18
如何使用CImg调整屏幕中的所有点
- 19
Fancybox无法正常工作，如何使重叠式广告正常工作
- 20
CSS3过渡会在流体宽度设计中产生间隙和重叠
- 21
如何在CSS3中使用伪类创建自定义形状
- 22
如何使用CSS3做自定义边框形状
- 23
在CSS3上带有边框的波（或形状？）
- 24
使用SVG / Canvas / CSS3创建这些形状？
- 25
使用CSS3进行凹凸形状导航
- 26
css3在使用图形创建形状之前和之后
- 27
使用SVG / Canvas / CSS3创建这些形状吗？
- 28
使用css3和html创建此形状
- 29
如何删除有点重复的行？
我来说两句