CSS Треугольник внутри треугольника?

Question

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

#triangle { 
    border-style: solid; 
    border-width: 25px 50px 25px 0; 
    border-color: transparent #000 transparent transparent; 
} 

Answer 1

Попробуйте использовать псевдо-элемент, как :after.

Здесь вы идете!

#triangle { 
 
    border-style: solid; 
 
    border-width: 25px 50px 25px 0; 
 
    border-color: transparent #000 transparent transparent; 
 
    width: 0; 
 
    position: relative; 
 
} 
 
#triangle:after { 
 
    content: ' '; 
 
    position: absolute; 
 
    border-style: solid; 
 
    border-width: 13px 25px 13px 0; 
 
    border-color: transparent red transparent transparent; 
 
    width: 0; 
 
    top: -13px; 
 
    left: 17px; 
 
}

<div id="triangle"> 
 
</div>