Comment casser la bordure autour du texte en css ?

Question

Je suis en train de créer un blockquote pour mon site web, il ressemble actuellement à ceci : blockquote

Je voudrais casser la bordure autour de la citation d'ouverture pour qu'elle ressemble à ceci :

style préféré

Quelqu'un sait-il comment faire ? Voici le CSS que j'ai actuellement, si cela peut vous aider.

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

Si la citation en bloc ne sera utilisée que sur un fond blanc, une solution simple consisterait à donner à la balise blockquote::before une couleur de fond blanche.

Modifier

J'aime l'idée de @MarkPerera d'hériter de la couleur d'arrière-plan au lieu d'utiliser le blanc, mais je ne suis pas sûr que cela fonctionne correctement.

Answer 2

Je suppose que d'après votre CSS, votre HTML devrait être comme ça :

<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>

J'ai fait un JSFiddle pour rendre votre blockquote. J'ai également modifié la façon dont vous utilisez la taille car il n'était pas possible d'ajouter plus ou moins de texte. BTW je suppose que vous utilisez un fond blanc comme dans votre exemple.

Answer 3

Remplacer blockquote:before, blockquote:after { ... } avec cette

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. J'ai utilisé les deux points ici aussi pour la cohérence.