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

Question

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

天蓬老师 · Answer

css clip可以实现

clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);

http://bennettfeely.com/clippy/

高洛峰 · Answer

确实需要点小trick,写了一个看看如何
代码如下：

.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、可以画三角形
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扣图最直接了。

大家讲道理 · Answer

inherit , inherit
使用继承。

php8，我来也

30分钟学会网站布局

尚观Oracle入门到精通视频教程

你的第一行 UNI-APP 代码

Flutter 从头到应用启动

兄弟连Linux新版视频教程

AXURE 9视频教程（适合产品经理交互产品设计UI）

零基础PS视频教程

16天带你入门UI视频教程

PS技巧和切片技巧视频教程

阿里云环境搭建以及项目上线视频教程

计算机网络概述——程序员必须掌握的基础知识

程序员必备教程——HTTP协议讲解

Websocket视频教程