这可能是一个快速修复我只是不明白发生了什么。
我看到了问题Create a complex CSS shape (speaking bubble)的答案,我想做出类似的事情。所以在我的尝试中出于某种原因:在伪元素之前没有显示“父”div之外。我试图让它看起来像一个气泡,所以我需要在div之外显示元素。
这是我的代码
HTML
<div class="image">
<img class="test" src="http://fc00.deviantart.net/fs71/f/2011/322/e/2/e292b11555866aec8666ded2e63ee541-d4gl4vg.png" alt="leopard" />
</div>
CSS
body {
background-color: #333;
}
.image {
position:relative;
width:360px;
background:orange;
border-radius: 15px;
overflow: hidden;
margin-left: 15px;
}
.image:before {
position: absolute;
z-index: 1;
content: '';
background-color: #fff;
border: solid 0 transparent;
top: 50px; left: -1.25em;
width: 5em; height: 1em;
transform: rotate(45deg) skewX(75deg);
-moz-box-shadow: inset 0 0 5px #000000, -3px 0px 2px 6px #000;
-webkit-box-shadow: inset 0 0 5px #000000, -3px 0px 2px 6px #000;
box-shadow: inset 0 0 5px #000000, -3px 0px 2px 6px #000;
}
.test {
display:block;
width:100%;
}
这是一个codepen。 Demo
感谢答案。
答案 0 :(得分:1)
如果图像元素上有overflow: hidden
,则不会在其外显示任何内容。这就是hidden
所做的。
你可以:
overflow: hidden
,然后将图像更改为大小为div的元素,并将图像用作背景图像,或答案 1 :(得分:1)
删除溢出:隐藏并将border-radius
添加到.image
和.test
http://codepen.io/anon/pen/bFElG