html - 1 つの定数次元を持つ CSS 三角形

Question

私は CSS 境界矢印をかなり定期的に使用してきましたが、達成したいことがそれらで可能かどうかわからないので、別のルートに進み、代わりに疑似要素を使用しました。私のソリューションが三角法に依存していることは知っていますが、それを実装する方法はまだわかりません。

.front div の高さに関係なく、7PX 幅を維持できるようにする必要があるため、固定幅で柔軟な高さを使用できます。

.front{
    height: 20px;
    **width: 7px;**
    background-color: darkred;
    position: relative;
}

これは、数学的に制御された方法で変換角度を変更することを意味します。

.front:after{
    content: " ";
    height: 30px;
    width: 15px;
    background-color: lightgreen;    
    position: absolute;
    top:0;
    left: 0;
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-transform: rotate(-20deg);
    transform: rotate(-20deg);

}

これを達成するためのより簡単な方法はありますか？ピクセル化のため、画像は明らかに問題外です...

ここでJsFiddle 。