0

这可能是一个快速修复我只是不明白发生了什么。

我看到了一个问题的答案Create a complex CSS shape (speaking bubble)，我想做类似的东西。所以在我的尝试中，由于某种原因，:before 伪元素没有显示在“父”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%;
}

这是一个代码笔。演示

答案表示赞赏。

4

2 回答 2

1

如果您有overflow: hidden图像元素，则不会在其之外显示任何内容。就是hidden这样。

你可以：

  • 移除overflow: hidden, 并将图像更改为大小合适的 div 元素，并将图像用作背景图像，或
  • 将图像包装在另一个元素中，并将 :before 样式应用于包装元素
于 2013-09-12T02:32:27.967 回答
1

删除溢出：隐藏并将您添加border-radius到.imagehttp://codepen.io/anon/pen/bFElG.test

于 2013-09-12T05:29:54.623 回答