Quotes CSS

by Anton Kolesnikov

HTML

<div class="quotes">
    <div class="avatar">
        <img src="http://u.ph.edim.co/5164192_4.jpg" />
    </div>
    <div class="text">
        <p>
            "Созданы из света мы. Не из материи грубой.
            <br /><br />
            Ты должен чувствовать Силу вокруг... между тобой, мной, травой, камнем...
            <br /><br />
            Везде! Да! Даже между берегом и кораблем."
        </p>
    </div>
</div>

CSS

.quotes {
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: flex-start;
}
.avatar img {
    width: 140px;
    height: 140px;
    margin: 10px;
    border-radius: 70px;
}
.text {
    width: 100%;
    max-width: 450px;
    border: 1px solid #CECECE;
    position: relative;
    border-radius: 5px;
    margin-left: 10px;
    box-shadow: 0px 0px 4px #ccc;
}
.text:before, .text:after {
    position: absolute;
    content: "";
    width: 0;
    height: 0;
    border: solid;
}
.text p {
    margin: 10px;
    font-family: Tahoma;
}
.text:before {
    top: 50px;
    left: -15px;
    border-color: transparent #CECECE transparent transparent;
    border-width: 0 15px 15px 0;
}
.text:after {
    top: 51px;
    left: -13px;
    border-color: transparent #FFF transparent transparent;
    border-width: 0 14px 14px 0;
}