Как сверстать подобную цитату?

Question

[Ord EO]

Подскажите пожалуйста новичку, как сверсть подобную цитату, особенно инетересует как силой чистого СSS(SCSS) сверстать полоску с ромбом сбоку?

Comments

[ⓒⓢⓢ]

когда-то делал вот такое:
https://codepen.io/jrkdv/pen/vqZwYJ
суть такая же ...

Answer 1

[Дмитрий]

При помощи псевдоклассов ::before и ::after - самый простой вариант.
Родителю (blockquote или p) - position:relative, а двум псевдоклассам - абсолютное позиционирование и соответствующие стили.

Comments

[Игорь]

поддерживаю. Полоску можно еще через border сделать

[Ord EO]

а как сделать ромб?

[Andrey Vasilev]

Ord EO,
<div id="diamond"></div>

#diamond {
    width: 120px;
    height: 120px;
    background: #1eff00;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -webkit-transform-origin: 0 100%;
    -moz-transform-origin: 0 100%;
    -ms-transform-origin: 0 100%;
    -o-transform-origin: 0 100%;
    transform-origin: 0 100%;
    margin: 60px 0 10px 310px;
}

[Дмитрий]

Ord EO,
https://codepen.io/dmi3mart/pen/YzPwxbR

Делаешь фигуру на простом css, затем при помощи transform (rotate, skew) приводишь ее к форме нужного ромба.
css3generator.com - вот тут можешь поиграть с этими свойствами.