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 模擬出三角形， 然后定位到那里