CSS Треугольник + Реализация после

Question

Я попытался создать треугольник с помощью CSS, и он выглядит хорошо, однако теперь у меня возникла проблема с его реализацией после прямоугольника.

Посмотрите мой пример, и вы поймете, что я имею в виду:

http://jsfiddle.net/TTVuS/

Кажется, что треугольник после .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;
}

Answer 1

Изменение треугольника на position: absolute; и добавление position: relative; к .box исправляет его.Кажется, он наследует высоту коробки.

Answer 2

, если вы хотите сделать , это !

вставить стрелку класса div в поле класса div может быть единственным решением.

html{
    padding:50px
}

.box{
    position : relative;
    background:red;
    height:40px;
    width:100px;
    border : 0px;
}
/*
.box:after{
    position : relative;
    content:"";
    width:0;
    height:0;
    border-top:20px solid transparent;
    border-bottom:20px solid transparent;
    border-left:20px solid green;
}
*/
.arrow{
    width:0;
    height:0;
    border-top:20px solid transparent;
    border-bottom:20px solid transparent;
    border-left:20px solid green;
}

<div class="box">
    <div class="arrow">
    </div>
</div>

<br><br><br>

<div class="arrow">
</div>