Intentando hacer triángulos en CSS

[_cronos2]

Buenas tardes amigos, resulta que estoy haciendo un form y en él hay un textarea (que imita a un input, es decir, sólo tiene una línea). Lo que quiero hacer es esto.
Entonces el textarea se quedaría debajo (en términos de profundidad) y por encima un submit para enviar el form, con la flecha hacia la izquierda. Estoy siguiendo, o eso creo, el "tutorial" que pusieron, pero no resulta
Ellos tienen una estructura diferente de la mía, yo tengo esto:

Código HTML:

<form id="logicarama" action="" method="POST">
    <textarea id="proposition" class="ninecol last" rows="1"></textarea>
    <input type="submit" id="generate" value="Generar" />
</form>
 

Así que la analogía sería h2 - form y a - #generate, y por tanto puse el CSS así:

Código CSS:

textarea#proposition {
            font:20px monospace;
            resize:none;
        }
        
        input#generate {
            position:relative;
            border-left:5px solid white;
            padding:0 10px;
            background:#A2D6EB;
            color:black;
        }
        
        form#logicarama {
            height:30px;
            padding:0 0 0 10px;
            line-height:2;
        }
        
        #generate:before,
        #generate:after {
            content: "";
            position: absolute;
            /* Pushed down half way, will get pulled back up half height of triangle
               ensures centering if font-size or line-height changes */
            top: 50%;
            width: 0;
            height: 0;
        }
        
        #generate:before {
            left: -12px;
            /* Triangle */
            border-top: 8px solid transparent;
            border-bottom: 8px solid transparent;
            border-right: 8px solid white;
            /* Pull-up */
            margin-top: -8px;
        }
        
        #generate:after {
            /* Smaller and different position triangle */
            left: -5px;
            border-top: 6px solid transparent;
            border-bottom: 6px solid transparent;
            border-right: 6px solid #111;
            margin-top: -6px;
        }
 

Pero nada, se queda como un submit normal y el border-left de 5px blanco.
¿Qué estoy haciendo mal? He mirado en el CSS del ejemplo pero no veo nada que se me haya pasado
Espero que me puedan ayudar.
Saludos y gracias de antemano :D