Я попытался создать треугольник с CSS, и он выглядит хорошо, однако у меня теперь есть проблема с его реализацией после коробки.
Посмотрите мой пример, и вы увидите, что я имею в виду:
Кажется, что треугольник после .box
получает "отрезанный", и я совершенно не знаю, почему это происходит.
Я хочу, чтобы он выглядел как .arrow
.
Я попытался изменить размеры окна, треугольника и т.д., но ничего не получилось.
p.s. вот css в случае, если Jsfiddle медленный или недоступен снова:
.box{
background:red;
height:40px;
width:100px;
}
/*the triangle but its being cut off*/
.box:after{
content:"";
width:0;
height:0;
border-top:20px solid transparent;
border-bottom:20px solid transparent;
border-left:20px solid green;
}
/*the triangle how it should look like*/
.arrow{
width:0;
height:0;
border-top:20px solid transparent;
border-bottom:20px solid transparent;
border-left:20px solid green;
}