问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

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

头像
PasDajavu
    16111827

    怎么用div画出这样的效果
    图片描述

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

    css3csshtml5html
    阅读 6.9k
    4 个回答
    得票最新
    头像
    cc长空
      1.9k1924
      ✓ 已被采纳
      头像
      ciqulover
        1.4k2315

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

        <body>
<div class="main">
</div>
</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;
  }

        clipboard.png

        https://jsfiddle.net/ycwalker...

        头像
        王建霏Fighting
          292

          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扣图最直接了。

          头像
          chokcoco
            12.4k4732

            inherit , inherit
            使用继承。

            撰写回答
            你尚未登录，登录后可以
            • 和开发者交流问题的细节
            • 关注并接收问题和回答的更新提醒
            • 参与内容的编辑和改进，让解决方法与时俱进
            推荐问题