CSSで片方だけ斜めにして台形にする方法

完成イメージ

divなどの要素は長方形であり、1つの角が90度でない形にはできません。
しかし、見た目上の三角形と組み合わせることで見た目上の台形ができます。
ここではCSSだけで下だけ斜めの台形ができます。
レスポンシブ対応です。

html

<div class="triangle">テキスト</div>

css

.triangle{
    background: aqua;
    padding: 15px;
    position: relative;
    margin-bottom: 5%;
}
.triangle::after{
    content: "";
    display: block;
    width: 100%;
    height: 0;
    padding-top: 5%;
    position: absolute;
    top: 100%;
    left: 0;
    background:
    linear-gradient(to bottom left, red 48%, transparent 52%) ;
}

解説

四角の下に、右上が90度の三角形をくっつけたイメージです。
これにより下だけ斜めが実現します。

divの下にafterを設置します。（わかりやすいように別の色にしています。）

CSS

.triangle{
    background: aqua;
    padding: 15px;
    position: relative;
    margin-bottom: 5%;
}
.triangle::after{
    content: "";
    display: block;
    width: 100%;
    height: 0;
    padding-top: 5%;
    position: absolute;
    top: 100%;
    left: 0;
    background:red; 
}

レスポンシブ対応を意識し、下の四角は横幅に応じて縦横比を維持できるよう、height:0;padding-top: 5%;を指定しています。
paddingやmarginの%は横幅が基準となります。

上の四角にmargin-bottom: 5%をつけることで下の四角（三角）分のスペースを確保します。

あとはCSSでborderを使わず三角形を作る方法を応用して下の四角の背景（background）を三角にします。

background:linear-gradient(to bottom left, red 48%, transparent 52%) ;

backgroundの48%,52%の部分ですが、ブラウザ幅を狭くするとガキガキになり、広くするとぼやけてしまいます。
メディアクエリを使って場合分けするのもいいかもしれません。

まとめ

四角+三角を使えばいろいろな形が実現できそうですね。

以上、CSSで下だけ斜めにする方法でした。