Triángulo CSS + Implementación "Después"

He intentado crear un triángulo con CSS y se ve bien, sin embargo, ahora tengo un problema para implementarlo después de un cuadro.

Echa un vistazo a mi ejemplo y verás lo que quiero decir:

Http://jsfiddle.net/TTVuS /

Parece que el triángulo después de .box se "corta" y no tengo absolutamente ninguna idea de por qué sucede esto.

Quiero que se vea como .arrow.

He intentado cambiar las dimensiones de la caja, el triángulo etc. pero nada trabajar.

P. s. Aquí está el css en caso de que Jsfiddle sea lento o no esté disponible de nuevo:

.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;
}
 31
csscss3
Author: Oskar, 2011-11-30
Source

2 answers

Cambiar el triángulo a position: absolute; y agregar position: relative; al .box lo soluciona. Parece estar heredando la altura de la caja.

 27
Author: Nate B,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2011-11-30 14:29:24

Si quieres hacer esto !

Insertar una flecha de clase div en el cuadro de clase div puede ser la única solución. 

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>
 4
Author: Ivan4166,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-01-31 13:14:07