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

Как возможно решить такую проблему? Есть фигура из 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 из основного элемента?

Ответ

Цвет границы можно наследовать.
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; }