Farbe der Sprechblase uneinheitlich


tklustig

Erfahrenes Mitglied
#1
Hallo Leute,
durch folgenden Code erzeuge ich dynamisch eine Sprechblase. Leider ist die Hintergrundfarbe der Sprechblase nicht einheitlich, sondern verschiedenfarbig. Weiß jemand Abhilfe? CSS(fix)
CSS:
    .speech-bubble {
        background: yellow;
        position: absolute;
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
        border-radius: 10px;
    }
    .speech-bubble:before {
        content:"";
        position: absolute;
        width: 0;
        height: 0;
        border-top: 13px solid transparent;
        border-right: 26px solid #037CA9;
        border-bottom: 13px solid transparent;
        margin: 13px 0 0 -25px;
    }
JQuery(dynamisch)
Javascript:
      $(document).ready(function () {
            $("#speech-bubble").css({
                position: "absolute",
                width: "320px",
                height: "120px",
                right: "50%",
                top: "60%"
            });
            $("#speech-bubble").html("<p>Folgende Parameter werden in das Matching integriert:</p>");
        });
HTML
HTML:
    <div class="speech-bubble" id="speech-bubble">
    </div>
bubble.jpg
 

Sempervivum

Erfahrenes Mitglied
#2
Ich nehme an, Du meinst, dass die Farbe des Pfeils anders ist als die des Kastens. Das lässt sich leicht beheben, indem Du dem Pfeil die selbe Farbe gibst (border-right):
CSS:
        .speech-bubble:before {
            content: "";
            position: absolute;
            width: 0;
            height: 0;
            border-top: 13px solid transparent;
            border-right: 26px solid yellow;
            border-bottom: 13px solid transparent;
            margin: 13px 0 0 -25px;
        }
 

tklustig

Erfahrenes Mitglied
#3
Yuup. Vor lauter Bäumen den Wald nicht gesehen. Thx for this information.
Wie kann ich diesen Thread als gelöst markieren? Der entsprechende Button fehlt seit Neuestem