html - css div怎么和它的伪类after共用一样背景图片？
怎么用p画出这样的效果
p怎么和它的伪类after共用一样背景图片？能实现吗？
天蓬老师2017-04-17 14:40:09
css clip can be achieved
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
It really needs a little trick, I wrote one to see how it works
The code is as follows:
<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. You can draw a triangle
2. You can do this: change the background color to the picture you need, and pay attention to the color difference!
.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. Directly deducting pictures from PS is the most direct way.
