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

overflow: hidden を削除し、 http://codepen.io/anon/pen/bFElG の両方に yourを追加border-radiusします.image.test

于 2013-09-12T05:29:54.623 に答える