Прежде чем наследовать цвет от родительского элемента

Как сделать треугольник 'before' наследовать цвет от квадрата? Color:inherit, border-color:inherit, background-color:inherit не работает.Прежде чем наследовать цвет от родительского элемента

HTML:

<div class="tag"> 
    16,00 € 
</div>

CSS:

.tag{ 
    position:absolute; 
    top:20px; 
    left:150px; 
    display:block; 

    width:290px; 
    height:100px; 
    background-color: orange; 
    border-color: orange; 

}  
.tag:before{ 
     color:orange; 
     content:""; 
     position:absolute; 
     left:-50px; 
     border-top: 50px solid transparent; 
     border-right: 50px solid; 
     border-bottom: 50px solid transparent; 
    }

Fiddle: http://jsfiddle.net/vkw281gL/

источник

2014-09-30 user43132

Пограничные цвета не наследуемые свойства, вы просто должны определить их на элемент псевдо. Отстой ... но это просто нужно сделать. –

Что делать, если пользователь вводит некоторый цветовой код, который применяется через переменную в HTML? как в

Price

, как мне выбрать псевдоэлемент? – user43132

Я предполагаю, что вы не имеете в виду 'color', а' border-color'. Непонятно, что вы пытаетесь сделать. –

Вы могли бы использовать что-то вроде этого, который требует дополнительного элемента, как вы должны сбросить цвет текста ,

JSfiddle Demo

Цвет текста наследуется и имеет собственный имя переменной currentColor, которые могут быть использованы на дочерние элементы (и псевдо- элементов).

Таким образом, мы добавляем внутреннее span в div и применяем заданный цвет текста к div.

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

\t .tag { 
 
\t  position:absolute; 
 
\t  top:20px; 
 
\t  left:150px; 
 
\t  display:block; 
 
\t  color:green; 
 
\t  width:290px; 
 
\t  height:100px; 
 
\t  background-color: currentColor 
 
\t } 
 
\t span { 
 
\t  color:black; 
 
\t } 
 
\t .tag:before { 
 
\t  content:""; 
 
\t  position:absolute; 
 
\t  left:-50px; 
 
\t  border-top: 50px solid transparent; 
 
\t  border-right: 50px solid currentColor; 
 
\t  border-bottom: 50px solid transparent; 
 
\t }

<div class="tag"> 
 
    <span>16,00 €</span> 
 
</div>

источник

2014-09-30 15:14:16

Прежде чем наследовать цвет от родительского элемента

ответ

Смежные вопросы