【CSS】这个右下角折角用css怎么画出来？

• Z时代
• 2024-01-10
• 分类：技术分享

这种折角用css怎么画出来啊，右下角那个？

回答：

可以通过伪类的border-color来实现。

HTML

<div class="bg">
    <div class="paper"></div>
</div>

CSS

.bg{
    padding:10px;
    background: #262a67
}
.paper{
    background:#00b5e9;
    width:500px;
    height:500px;
    position: relative;
}
.paper:before{
    content:"";
    position: absolute;
    right:0;
    bottom:0;
    display: block;
    border: 50px solid;
    border-color:#0095be transparent transparent #0095be;
}
.paper:after{
    content:"";
    position: absolute;
    right:0;
    bottom:0;
    display: block;
    border: 50px solid;
    border-color:transparent #262a67 #262a67 transparent ;
}

如果因为底下背景不是纯色的话，那就需要把折页拆成矩形条以及折页三角形。也可以通过伪类来实现。
只是提供参考，具体实施还需要自己按需要修改。

HTML

<div class="paper"></div>

CSS

.paper{
    width:500px;
    height:500px;
    position: relative;
    background:#00b5e9;
}
.paper:after{
    content:"";
    position: absolute;
    right:0;
    bottom:-100px;
    display: block;
    border: 50px solid;
    border-color:#0095be transparent transparent #0095be;
}
.paper:before{
    content:"";
    background:#00b5e9;
    width:400px;
    height:100px;
    position: absolute;
    bottom:-100px;
}

回答：

可以百度一下CSS3折角

回答：

我是利用三个div来实现的，一个正方形div包括着两个三角形的div，然后通过position来定位。。。

回答：

hover.css http://ianlunn.github.io/Hover/ 有这种效果， 折角是用了 渐变色

其他思路 可以用 border-width 模拟出三角形， 然后定位到那里

以上是 【CSS】这个右下角折角用css怎么画出来？ 的全部内容， 来源链接： utcz.com/a/155794.html