css3 - 这个右下角折角用css怎么画出来？

问题描述

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

问题解答

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

HTML

<p class='bg'> <p class='paper'></p></p>

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

<p class='paper'></p>

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;}回答2：

可以百度一下CSS3折角

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

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

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