html - css div怎么和它的伪类after共用一样背景图片？

Question

怎么用div画出这样的效果 div怎么和它的伪类after共用一样背景图片？能实现吗？

天蓬老师 · Answer

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/

高洛峰 · Answer

It really needs a little trick, I wrote one to see how it works
The code is as follows:

.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...

高洛峰 · Answer

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.

大家讲道理 · Answer

inherit, inherit
Use inheritance.

Php8, I'm coming too

Learn website layout in 30 minutes

Shangguan Oracle Beginner to Proficient Video Tutorial

Your first line of UNI-APP code

Flutter from scratch to app launch

Brother Lian New Linux Video Tutorial

AXURE 9 Video Tutorial (Suitable for Product Manager Interactive Product Design UI)

Zero Basic Proficiency PS Video Tutorial

16 day UI video tutorial to get you started

PS Techniques and Slicing Techniques Video Tutorial

Alibaba Cloud Environment Construction and Project Launch Video Tutorial

Overview of Computer Networks - Basic Knowledge that Programmers Must Master

Essential Tutorial for Programmers - HTTP Protocol Explanation

Websocket Video Tutorial