[4.2.x] Треугольник у блока цитаты на CSS

01-11-2015, 03:56 PM

В общем, копал я тут стандартный стиль под свои нужды. Получил вот это:

Ну, оно, собственно, понятно - это сделано картинкой и не обязано само перекрашиваться в нужный цвет.
До кучи это и при масштабировании ведет себя иногда не слишком хорошо и начинает жить собственной жизнью:

В общем плюнул я на рисование картинок и сделал на CSS.
В additional.css добавил это:

Code:

.bbcode_container .bbcode_quote_container{
background: none;
width:0px;
height:0px;
}

.bbcode_container .bbcode_quote_container:after{
content: "";
position: absolute;
top: 50%;
margin-top: 0;
border-right: 10px solid {vb:stylevar bbcode_quote_background.backgroundColor};
border-top: 7px solid transparent;
border-bottom: 7px solid transparent;
left: 1px;
right: auto;
z-index:2;
width:0px;
height:0px;

}

.bbcode_container .bbcode_quote_container:before{
content: "";
background: none;
position: absolute;
top: 50%;
margin-top: 0;
border-right: 10px solid {vb:stylevar bbcode_quote_border.borderColor};
border-top: 7px solid transparent;
border-bottom: 7px solid transparent;
left: -1px;
right: auto;
width:0px;
height:0px;
z-index:1;
}

Теперь треугольник этот сам приобретает нужный цвет, не шалит при масштабировании и выглядит так:

Единственное, что здесь криво - это не будет работать для локалей с right-to-left.

01-11-2015, 08:54 PM

Стандартная реализация, можно скриншот как выглядит данный объект в мозилле, IE?

01-11-2015, 09:11 PM

Quote:

Originally Posted by WatcherOfTheSun

Единственное, что здесь криво - это не будет работать для локалей с right-to-left.

Не только это. Если переменная bbcode_quote_background.backgroundColor в стиле задана через rgba (с альфа каналом) цвет фона треугольника будет отличаться от фона цитаты.

01-11-2015, 09:17 PM

Quote:

Originally Posted by Konkere

Не только это. Если переменная bbcode_quote_background.backgroundColor в стиле задана через rgba (с альфа каналом) цвет фона треугольника будет отличаться от фона цитаты.

Ну да, на это не проверял. Надо будет покопаться...