84669 人學習
152542 人學習
20005 人學習
5487 人學習
7821 人學習
359900 人學習
3350 人學習
180660 人學習
48569 人學習
18603 人學習
40936 人學習
1549 人學習
1183 人學習
32909 人學習
怎么用p画出这样的效果
p怎么和它的伪类after共用一样背景图片?能实现吗?
css clip可以實現
clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);
http://bennettfeely.com/clippy/
確實需要點小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...
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扣圖最直接了。
inherit , inherit 使用繼承。
css clip可以實現
http://bennettfeely.com/clippy/
確實需要點小trick,寫了一個看看如何
程式碼如下:
https://jsfiddle.net/ycwalker...
1、可以畫三角形
2、可以這樣:把背景色換成你需要的圖片,注意色差!
.d1{
}
.d1 span{
}
3.直接PS扣圖最直接了。
inherit , inherit
使用繼承。