Цвет для псевдоэлемента

#css #sass

Как возможно решить такую проблему? Есть фигура из 3-х css объектов. 



body {
    margin: 50px 20px;
}

.main__item_logo {				
     width: 132px;
     height: 100px;				
     position: relative;
     background: orange;
}	

.main__item_logo:before {
    content: "";
    position: absolute;
    top: -35px;
    left: 0;
    width: 0;
    height: 0;
    border-left: 68px solid transparent;
    border-right: 64px solid transparent;
    border-bottom: 35px solid ;
}

.main__item_logo:after {
    content: "";
    position: absolute;
    bottom: -35px; 
    left: 0;
    width: 0;
    height: 0;
    border-left: 68px solid transparent;
    border-right: 64px solid transparent;
    border-top: 35px solid;
}







Необходимо задать значение цвета для псевдоэлементов в строке border-top: 35px solid
<цвет>;.

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

Ответы

Ответ 1

Цвет границы можно наследовать.



body {
    margin: 50px 20px;
}

.main__item_logo {              
    width: 132px;
    height: 100px;              
    position: relative;
    background: blue;
    border-color: blue;
}   

.main__item_logo:before, .main__item_logo:after {
    content: "";
    position: absolute;
    left: 0;
    width: 0;
    height: 0;
    border-left: 68px solid transparent;
    border-right: 64px solid transparent;
}

.main__item_logo:before {
    bottom: 100%;
    border-bottom: 35px solid;
    border-bottom-color: inherit;
}

.main__item_logo:after {
    top: 100%;
    border-top: 35px solid;
    border-top-color: inherit;
}



Ответ 2

1) Задать цвет переменной в SASS, использовать переменную в нужных местах.

2) Если непосредственно внутри элемента не предполагается наличие текста, то можно
указать нужное значение в color и оно унаследуется для цвета границ у псевдоэлементов:



.main__item_logo {
  width: 132px;
  height: 100px;
  position: relative;
  background: #fdcf0a;
  color: #fdcf0a; /* цвет границ берется отсюда */
  margin: 50px 0 0;
}

.main__item_logo:before {
  content: "";
  position: absolute;
  top: -35px;
  left: 0;
  width: 0;
  height: 0;
  border-left: 68px solid transparent;
  border-right: 64px solid transparent;
  border-bottom: 35px solid;
}

.main__item_logo:after {
  content: "";
  position: absolute;
  bottom: -35px;
  left: 0;
  width: 0;
  height: 0;
  border-left: 68px solid transparent;
  border-right: 64px solid transparent;
  border-top: 35px solid;
}



Ответ 3

Улучшеный ответ @br3t (удалены все возможные повторения):



.main__item_logo {
  width: 132px;
  height: 100px;
  position: relative;
  background: currentColor;
  color: #fdcf0a; /* цвет границ берется отсюда */
  margin: 50px 0 0;
}

.main__item_logo:before,
.main__item_logo:after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  left: 0;
  border-left: 68px solid transparent;
  border-right: 64px solid transparent;
}

.main__item_logo:before {
  top: 100%;
  border-bottom: 35px solid;
}

.main__item_logo:after {
  bottom: 100%;
  border-top: 35px solid;
}





Чтобы вообще ваша фигура была очень гибкой используйте переменные CSS. Они имеют
хорошую поддержку браузеров (почти всё, кроме IE, даже Edge поддерживает).

Таким образом мы можем, к примеру, удалить повторяющееся значение 35px:



:root {
  --delta_height: 35px;
}

.main__item_logo {
  width: 132px;
  height: 100px;
  position: relative;
  background: currentColor;
  color: #fdcf0a; /* цвет границ берется отсюда */
  margin: 50px 0 0;
}

.main__item_logo:before,
.main__item_logo:after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  left: 0;
  border-left: 68px solid transparent;
  border-right: 64px solid transparent;
}

.main__item_logo:before {
  top: 100%;
  border-bottom: var(--delta_height) solid;
}

.main__item_logo:after {
  bottom: 100%;
  border-top: var(--delta_height) solid;
}





Таким же образом мы можем ещё дальше продвинуться в параметризации нашей фигуры,
чтобы мы могли пропорционально масштабировать наш шестиугольник.

Для этого мы будет использовать CSS calc и переменные. Но использование CSS variables
вместе с calc пока возможно только в Chrome и Firefox (см. секцию Nested calc() with
CSS Variables).

Изменяйте значение --r чтобы это увидеть.



:root {
  --r: 64px;
  --delta_height: calc(var(--r) / 2);
  --width: calc(var(--r) * 2);
  --height: calc(var(--width) - var(--delta_height));
}

.main__item_logo {
  width: var(--width);
  height: var(--height);
  position: relative;
  background: currentColor;
  color: #fdcf0a; /* цвет границ берется отсюда */
  margin: var(--delta_height) 0;
}

.main__item_logo:before,
.main__item_logo:after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  left: 0;
  border-left: var(--r) solid transparent;
  border-right: var(--r) solid transparent;
}

.main__item_logo:before {
  top: 100%;
  border-bottom: var(--delta_height) solid;
}

.main__item_logo:after {
  bottom: 100%;
  border-top: var(--delta_height) solid;
}