問(wèn)題描述

這種折角用css怎么畫(huà)出來(lái)啊，右下角那個(gè)？

問(wèn)題解答

可以通過(guò)偽類(lèi)的border-color來(lái)實(shí)現(xiàn)。

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 ;}

如果因?yàn)榈紫卤尘安皇羌兩脑挘蔷托枰颜垌?yè)拆成矩形條以及折頁(yè)三角形。也可以通過(guò)偽類(lèi)來(lái)實(shí)現(xiàn)。只是提供參考，具體實(shí)施還需要自己按需要修改。

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折角

我是利用三個(gè)p來(lái)實(shí)現(xiàn)的，一個(gè)正方形p包括著兩個(gè)三角形的p，然后通過(guò)position來(lái)定位。。。

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

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