css3 - 這個右下角折角用css怎么畫出來？
問題描述
這種折角用css怎么畫出來啊，右下角那個？
問題解答
回答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;}回答2：
可以百度一下CSS3折角
回答3：我是利用三個p來實現的，一個正方形p包括著兩個三角形的p，然后通過position來定位。。。
回答4：hover.css http://ianlunn.github.io/Hover/ 有這種效果， 折角是用了 漸變色
其他思路 可以用 border-width 模擬出三角形， 然后定位到那里
相關文章：
1. 一個mysql聯表查詢的問題2. mysql - 一個表和多個表是多對多的關系，該怎么設計3. 運行python程序時出現“應用程序發生異常”的內存錯誤？4. html5 - iOS的webview加載出來的H5網頁，怎么修改html標簽select的樣式字體？5. python如何不改動文件的情況下修改文件的 修改日期6. javascript - git clone 下來的項目 想在本地運行 npm run install 報錯7. java - 我現在一個servlet中有調用socket訪問，作為socket的客戶端，8. 主從備份 - 跪求mysql 高可用主從方案9. mysql主從 - 請教下mysql 主動-被動模式的雙主配置 和 主從配置在應用上有什么區別？10. python 如何實現PHP替換圖片 鏈接
網公網安備