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

Question

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

Answer 1

可以透過偽類的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;
}

Answer 2

可以百度一下CSS3折角

Answer 3

我是利用三個p來實現的，一個正方形p包括著兩個三角形的p，然後透過position來定位。 。 。

Answer 4

hover.css http://ianlunn.github.io/Hover/ 有這種效果， 折角是用了 漸變色

其他想法 可以用 border-width 模擬出三角形， 然後定位到那裡