html - css div怎么和它的偽類after共用一樣背景圖片?
問題描述
怎么用p畫出這樣的效果
p怎么和它的偽類after共用一樣背景圖片?能實現嗎?
問題解答
回答1:css clip可以實現
clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);
http://bennettfeely.com/clippy/
回答2:確實需要點小trick,寫了一個看看如何代碼如下:
<body><p class='main'></p></body>
.main { position: relative; width: 412px; height: 261px; background:url(’http://pic.baike.soso.com/p/20130828/20130828162541-2121279471.jpg’) no-repeat; border-radius: 10px;}.main:after { position: absolute; top: 261px; left: 20px; width: 20px; height: 20px; content: ’’; box-sizing: border-box; border-top: 20px solid transparent; border-left: 20px solid #f3f5f6; border-right: 20px solid #f3f5f6; background: inherit; background-position: -20px bottom; background-origin: border-box; }
https://jsfiddle.net/ycwalker...
回答3:1、可以畫三角形2、可以這樣:把背景色換為你需要的圖片,注意色差!.d1{
position: relative;border: 1px dashed #999;background: #fff;width: 150px;height: 100px;
}
.d1 span{
display: block;width: 20px;height: 20px;position: absolute;border-right:1px dashed #999;border-bottom:1px dashed #999;transform: rotate(45deg);bottom: -10px;left: 50%;margin-left:-15px;background: #fff;z-index: 99;
}3、直接PS扣圖最直接了。
回答4:inherit , inherit 使用繼承。
相關文章:
1. 老師您的微信號是多少?2. javascript - 微信網頁開發從菜單進入頁面后,按返回鍵沒有關閉瀏覽器而是刷新當前頁面,求解決?3. node.js - nodejs開發中常用的連接mysql的庫4. 在html文件的目錄下輸入代碼按回車后顯示這個,哪位大佬幫幫我 呀5. mysql - jdbc的問題6. mysql replace 死鎖7. 視頻文件不能播放,怎么辦?8. mysql - 分庫分表、分區、讀寫分離 這些都是用在什么場景下 ,會帶來哪些效率或者其他方面的好處9. windows7 ping不通虛擬機VMware上的linux(ubuntu)的ip10. mysql - 如何減少使用或者不用LEFT JOIN查詢?
