1

吹き出しの作成に使用する CSS を調整しています。CSS ソースはhttp://forrst.com/posts/How_to_Make_a_Pure_CSS_Speech_Bubble_With_a_Drop-PU1です。

バブルの背景を白に変更し、オレンジ色の境界線を追加しています。私の問題は、バブルの下部にある三角形の周りの境界線を表示できないことです。三角形自体は白 (#fff) で、境界線は #DD4814 です。

以下のスクリーンショットとフィドルはこちら: http://jsfiddle.net/tuGHT/ . 適切な CSS に関するアイデアをお持ちの方はいらっしゃいますか?

ここに画像の説明を入力

CSS

.bubble {
background-color: #fff;
border-radius: 7px;
border: 2px solid #DD4814;
box-shadow: inset 0 1px 1px hsla(0,0%,100%,.5),
            4px 4px 0 hsla(0,0%,0%,.1);
color: #333;
display: inline-block;
font-family: Ubuntu, sans-serif;
font: 16px/25px;
padding: 15px 25px;
position: absolute;
right: 20px;
}

.bubble:after, .bubble:before {
border-bottom: 25px solid transparent;
border-right: 25px solid #fff;
bottom: -25px;
content: '';
position: absolute;
right: 25px;
}
.bubble:before {
border-right: 25px solid hsla(0,0%,0%,.1);
bottom: -28px;
right: 22px;
}

HTML

<span class="bubble">Speech bubble right</span>
4

2 に答える 2

5

これは私が通常行う方法です: DEMO

基本的に、最初の要素の後ろにもう少し大きい:beforeまたは要素が必要です。:after

.bubble:before {
    border-right: 25px solid hsla(0,0%,0%,.1);
    bottom: -28px;
    right: 22px;
    z-index: 1;
}
.bubble:before {
    border-right: 27px solid #DD4814;
    border-bottom: 27px solid transparent;
    bottom: -29px;
    right: 23px;
    z-index: 0;
}
于 2013-04-08T11:20:36.157 に答える
0

これはあなたのCSS コードに配置されています

.bubble:before:after {
top: 45px;
left: -14px;
bottom: auto;
border-width: 15px 21px 0 0;
border-color: transparent #ebea85;
}

バブルは常に固定された場所に表示されます

于 2013-11-14T07:47:24.217 に答える