Wie breche ich den Rand um Text in CSS?

Question

ich ein Zitat für meine Website erschaffe, es sieht derzeit wie folgt aus: blockquote

Ich mag würde den Rahmen um das Eingangszitat brechen, so dass es wie folgt aussieht:

preferred style

Does Weiß jemand, wie man das macht? Hier ist das CSS, das ich momentan habe, wenn das hilft.

blockquote { 
     display: block; 
     float: left; 
     background: #ffffff; 
     width: 180px; 
     padding-bottom: 0px; 
     font-style: italic; 
     font-family: Helvetica, MetaOT-bold, sans-serif; 
     font-size: 18px; 
     line-height: 1.5; 
     margin: 30px 25px 10px 0px; 
     border: 2px solid #5fa0d8; 
     border-bottom: 0; 
     border-bottom-left-radius: 12px; 
     border-bottom-right-radius: 12px; 
     padding: 20px; 
     padding-bottom: 0; 
     position: relative; 
     quotes:"\201C" "\201D"; /*Unicode for Quoteation marks*/ 
} 

blockquote p { 
    line-height: 1.5; 
    padding-bottom: 0px; 

} 

blockquote:before, blockquote:after { 
    color: #5fa0d8; 
    font-family: Georgia, serif; 
    font-style: normal; 
    font-weight: bold; 
    font-size: 100px; 
    position: absolute; 
} 

blockquote::before { 
    content: open-quote; 
    left: 10px; 
    top:-50px; 
} 

blockquote::after { 
    content: close-quote; 
    left: 160px; 
    top:150px; 
} 

cite { 
    display:block; 
    background-color: #5fa0d8; 
    width: 210px; 
    float: left; 
    color: #ffffff; 
    font-size: 13px; 
    font-style: normal; 
    padding: 3px; 
    padding-left: 10px; 
    margin-left: -21px; 
    border-bottom-left-radius: 12px; 
    border-bottom-right-radius: 12px; 
    margin-top: 23px; 
    margin-bottom: 0px; 
} 

Answer 1

ich von Ihrem CSS übernehmen, sollten Sie Ihre HTML aussehen:

<blockquote> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex cupiditate tenetur corporis officia corrupti at mollitia quam deleniti minus fuga accusantium, illo aliquid, eaque aperiam voluptatibus ad optio magni hic.</p> 
    <cite>Cite box</cite> 
</blockquote> 

Ich habe eine JSFiddle gemacht Ihre Blockquote zu machen. Ich habe auch die Art geändert, wie Sie die Größe verwenden, da mehr oder weniger Text nicht hinzugefügt werden konnte. BTW Ich nehme an, dass Sie einen weißen Hintergrund wie in Ihrem Beispiel verwenden.

Answer 2

Wenn die Blockquote wird nur auf weißen Hintergrund verwendet werden, eine einfache Lösung wäre, den blockquote::before eine weiße Hintergrundfarbe zu geben.

bearbeiten

I @ Idee MarkPerera wie die Hintergrundfarbe vererben anstelle von weiß, obwohl ich nicht sicher bin, ob dies richtig funktionieren würde.

Answer 3

ersetzen blockquote:before, blockquote:after { ... } mit diesem

blockquote::before, blockquote::after { 
    color: #5fa0d8; 
    background-color: inherit; //or white if it doesn't work 
    font-family: Georgia, serif; 
    font-style: normal; 
    font-weight: bold; 
    font-size: 100px; 
    position: absolute; 
} 

P. S. Früher habe ich zwei Doppelpunkte hier auch für Konsistenz