简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
html - css div怎么和它的伪类after共用一样背景图片？
巴扎黑
巴扎黑 2017-04-17 14:38:09
0
4
745

怎么用p画出这样的效果

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

巴扎黑
巴扎黑

membalas semua(4)
Peter_Zhu
Peter_Zhu2017-04-17 14:40:09 Tingkat 4

css clip可以实现

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

http://bennettfeely.com/clippy/

Suka +0
Tambah Balasan
小葫芦
小葫芦2017-04-17 14:40:09 Tingkat 3

确实需要点小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...

Suka +0
Tambah Balasan
小葫芦
小葫芦2017-04-17 14:40:09 Tingkat 2

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

Suka +0
Tambah Balasan
大家讲道理
大家讲道理2017-04-17 14:40:09 Tingkat 1

inherit , inherit
使用继承。

Suka +0
Tambah Balasan
Topik popular
Lagi>
Artikel popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina：Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！