html - css div怎么和它的伪类after共用一样背景图片？
问题描述
怎么用p画出这样的效果
p怎么和它的伪类after共用一样背景图片？能实现吗？
问题解答
回答1：css clip可以实现
clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);
http://bennettfeely.com/clippy/
回答2：确实需要点小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...
回答3：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扣图最直接了。
回答4：inherit , inherit 使用继承。
相关文章：
1. javascript - gulp-nodemon 使用重启express 服务器的时候端口被占用2. 求救一下，用新版的phpstudy，数据库过段时间会消失是什么情况？3. node.js - yo webapp构建项目时报错了，如图4. android-studio - android studio自带模拟器中的本地“图库”所对应的路径是什么？5. mysql - 对单表大量数据进行报表汇总有什么高效的方法6. html5 - 目前 公司App 嵌入H5页面 做个 手机支付功能 没有做过 所以 请求各位有经验的 给个思路7. thinkphp中Controller里面使用Request::File(’image’);8. 【python小白】 问关于之初始化一次对象的问题9. java - CompletableFuture allof 超时处理10. css3 - 学习css构建图形时，遇到一个很有意思的现象，具体代码如下
网公网安备