纯粹的CSS折叠效果与透明背景 [英] pure css folding effect with transparent background

问题描述

请看图片。如何使这种折叠效果。我非常需要透明度。

我试过这个。但是这在Firefox和IE中没有浏览器支持。此解决方案仅适用于Chrome。

  .fold-right {
 position：relative; 
} 
 .fold-right：之前{
 content：; 
位置：绝对; 
 top：-50px; 
 right：0; 
 border：25px solid #ccc; 
 -webkit-clip-path：polygon（100％100％，0 100％，0 0）; 
 clip-path：多边形（100％100％，0 100％，0 0）; 
} 
 .fold-right：在{
 content：; 
位置：绝对; 
 top：-49px;剩余
：-49px; 
背景：#fff; 
宽度：100％; 
 height：49px; 
 -webkit-clip-path：polygon（49px 0，100％0，100％100％，49px 100％）; 
 clip-path：多边形（49px 0，100％0，100％100％，49px 100％）; 
} 
  

解决方案

试试这个片段。我希望，这段代码可以帮助你。

  body {background：＃58A45E;}。fold-right {position：relative; width：200px; height：200px; background：＃f9f9f9; margin-top：100px; box-sizing：border- box; padding：10px; display：inline-block;}。fold-right：before {content：; position：absolute; top：-50px; right：0; border-left：0px solid transparent; border-right： 50px solid transparent; border-bottom：50px solid #ccc;}。fold-right：after {content：; position：absolute; top：-50px; left：0px; background：＃f9f9f9; width：calc（100％ -  50px）; height：50px;}  

< div class =fold-right> Box - 1< / div& >< div class =fold-right> Box - 2< / div>

b

Please see the image. How to make this kind of fold effect. I badly need the transparency.

I have tried this. but this has no browser support in Firefox and IE. This solution only works in Chrome.

.fold-right{
    position: relative;
}
.fold-right:before{
    content: "";
    position: absolute;
    top: -50px;
    right: 0;
    border: 25px solid #ccc;
    -webkit-clip-path: polygon(100% 100%, 0 100%, 0 0);
    clip-path: polygon(100% 100%, 0 100%, 0 0);
}
.fold-right:after{
    content: "";
    position: absolute;
    top: -49px;
    left: -49px;
    background: #fff;
    width: 100%;
    height: 49px;
    -webkit-clip-path: polygon(49px 0, 100% 0, 100% 100%, 49px 100%);
    clip-path: polygon(49px 0, 100% 0, 100% 100%, 49px 100%);
}

解决方案

Try this snippet. I hope, This snippet help you.

body{
background: #58A45E;
}
.fold-right{
position: relative;
width: 200px;
height: 200px;
background: #f9f9f9;
margin-top: 100px;
box-sizing: border-box;
padding: 10px;
display: inline-block;
}
.fold-right:before{
content: "";
position: absolute;
top: -50px;
right: 0;
border-left: 0px solid transparent;
border-right: 50px solid transparent;
border-bottom: 50px solid #ccc;
}
.fold-right:after{
content: "";
position: absolute;
top: -50px;
left: 0px;
background: #f9f9f9;
width: calc(100% - 50px);
height: 50px;
}

<div class="fold-right">Box - 1</div>
<div class="fold-right">Box - 2</div>

这篇关于纯粹的CSS折叠效果与透明背景的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！