CSS Testimonial

[nookie]

Hallo liebe Community,

ich wollte mir eine Kommentarbox erstellen. Soweit so gut. Doch fehlt mir der border beim Pfeil der auf den Author zeigt, wie krieg ich das nun hin?
http://jsfiddle.net/4j9XV/

<blockquote class="testimonial">
        <p>You don’t need to see his identification. These aren’t the droids you’re looking for. He can go about his business. Move along.
        You don’t need to see his identification. These aren’t the droids you’re looking for. He can go about his business. Move along.</p>
    </blockquote>
    <p class="testimonial-author"></p>

.testimonial {
    position: relative;
    margin: 0;
    background-color: #fafafa;
    border: 1px solid #e6e6e6;
    width: 70%;
    margin: 0 auto;
    border-radius: 2px;
    padding: 20px 20px 20px 70px;
}

.testimonial p {
    font-family: 'Open Sans', sans-serif;
    font-size: 0.9em;
    text-align: justify;
    font-weight: 400;
    color: #666666;  
}

.testimonial:before {   
    content: '"';  
       font-family: 'Open Sans', sans-serif;
    font-size: 80px;   
    line-height: 1;   
    color: #999;
    font-style: italic;
    position: absolute;
    left: 15px;
    top: 2px;
}

.testimonial:after {
    content: '';
    display: block;
    width: 0;
    height: 0;

    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #fafafa;
    position: absolute;
    bottom: -10px;
    left: 30px;
}

 

[threadi]

Bei mir (Firefox) sehe ich einen Pfeil nach unten unterhalb der Box - meinst Du den?

 

[nookie]

Ja genau den. Sorry wenn ich es ein bisschen ungenau beschrieben habe. Er sollte an der Box andocken (also bei mir tut er es zumindest). Jedoch möchte ich ihm noch einen Border verpassen und zwar genau den gleichen wie beim blockquote element.

 

[threadi]

Verstehe. Da Du den Pfeil bereits mit border realisiert hast, kannst Du keinen 2. border drummherum legen. Ich würde empfehlen entweder mit content einen Pfeil einzubauen und den Rahmen mit border zu sehen oder eine Grafik zu verwenden.

 

[nookie]

Hm und sonst gibt es keine anderen möglichkeiten da nochmal mit before oder after zu arbeiten? Weil über ein Sonderzeichen würde ich es ungern lösen und eine Grafik auch.

 

[threadi]

Ich sehe keine andere Möglichkeit.

 

[nookie]

Naja selbst wenn ich jetzt zb als content "\25BC" (ein Pfeil nach unten wähle), macht er mir den border im Viereck um den Pfeil und liegt nicht am Pfeil an.

 

[Banana_Jones]

ich hätte es so realisiert:

.testimonial:after {
    content: '';
    display: block;
    width: 0;
    height: 0;
    height: 20px;
    width: 20px;
    background: #fafafa;
    border-right: 1px solid #e6e6e6;
    border-bottom: 1px solid #e6e6e6;
    position: absolute;
    bottom: -11px;
    left: 20px;
     -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
}

 

[nookie]

Danke, ich habs jetzt auch so gelöst.