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. ios - 類似微博首頁,一張圖的時候是如何確定圖大小的?3. python - Django有哪些成功項目?4. MySQL主鍵沖突時的更新操作和替換操作在功能上有什么差別(如圖)5. Python中使用超長的List導致內存占用過大6. node.js - 微信小程序websocket連接問題7. javascript - vue過渡效果 css過渡 類名的先后順序8. javascript - 我是做web前端的,公司最近有一個項目關于數據統計的!9. javascript - 如何使用loadash對[object,object,object]形式的數組進行比較10. javascript - vuejs+elementui 購物車價格計算,點擊加減號修改數量總價都不會改變,但是計算執行了
