怎么用p画出这样的效果
p怎么和它的伪类after共用一样背景图片？能实现吗？
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/
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...
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.
inherit, inherit Use inheritance.
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
css clip can be achieved
http://bennettfeely.com/clippy/
It really needs a little trick, I wrote one to see how it works
The code is as follows:
https://jsfiddle.net/ycwalker...
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{
}
.d1 span{
}
3. Directly deducting pictures from PS is the most direct way.
inherit, inherit
Use inheritance.