html - css div怎么和它的伪类after共用一样背景图片？
怎么用p画出这样的效果
p怎么和它的伪类after共用一样背景图片？能实现吗？
Maison > Questions et réponses > le corps du texte
怎么用p画出这样的效果
p怎么和它的伪类after共用一样背景图片？能实现吗？
天蓬老师2017-04-17 14:40:09
css clip可以实现
clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);http://bennettfeely.com/clippy/
高洛峰2017-04-17 14:40:09
确实需要点小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...
高洛峰2017-04-17 14:40:09
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扣图最直接了。
