0

小さな三角形の背景を持つ吹き出しを作成していますが、唯一の問題は、角を丸くする必要があることです。これを行う方法は完全にはわかりませんが、ハックなどをいただければ幸いです。

これが私が持っているものです

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

.image {
    position:relative;
    width:340px;
    background:orange;
}
.image:before, .image:after {
    border-left: 20px solid white;
    content: "";
    left: 0;
    position: absolute;
    width: 0;
}
.image:before {
    border-bottom: 5px solid transparent;
    height: 34px;
    top: 0;
}
.image:after {
    top: 39px;
    bottom:0;
    border-top: 5px solid transparent;
}
.test {
    display:block;
    width:100%;
}

これがフィドルです。http://jsfiddle.net/yL7Hg/

編集:それが役立つ場合は、私のデザインが機能する方法の理由から、左上隅に半径が必要なだけです。.image で境界半径を使用するだけで右上を取得できます。

4

3 に答える 3

1

ここにあります：

http://jsfiddle.net/HYgbu/

<div class="mask">
<img class="second" src="http://fc00.deviantart.net/fs71/f/2011/322/e/2/e292b11555866aec8666ded2e63ee541-d4gl4vg.png" alt="leopard" /></div>

それが完璧な解決策ではないことはわかっていますが、それでも最初に考えたとおりです。

于 2013-09-12T00:21:07.770 に答える
1

これは、標準の CSS を使用して、はるかに簡単に実現できます。2 つの DIV を設定するだけです。1 つは矢印用、もう 1 つは背景としての画像 (IMG タグの代わり) です。

<div class="arrow" ></div>
<div class="test" ></div>

そして2つのそれぞれのクラス:

.arrow {
    width: 0; 
    height: 0; 
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent; 
    border-right:35px solid #1E0C01; 
    float:left;
    margin-top:50px;
}

.test {
    margin-left:35px;
    width:340px;
    height: 240px;
    background-size:cover;
    background-image: url("http://fc00.deviantart.net/fs71/f/2011/322/e/2/e292b11555866aec8666ded2e63ee541-d4gl4vg.png");

それだけです：http://jsfiddle.net/yL7Hg/5/

于 2013-09-12T01:18:56.197 に答える