CSSでギザギザとなみなみの下線を実装したい！

こんにちは、渡辺です。
そういえば、今年もかき氷食べました！（毎年かき氷をブログに載せていた気がしたので）

友達が朝の10時からお店に並んで整理券をとってくれたんですけど（ありがたい）
さすが整理券のためにオープンから並ぶかき氷だな～～って思いました。
すごくおいしかったので1時間電車に揺られて奈良県に出向いてよかったです。

さて、かき氷とは関係ないですが、WEBサイトを作っているときに、どうしても実装が難しそう（面倒くさそう）なデザインはやめて無難なものを選びがちになってしまいます。

画像を作れば簡単なものもたくさんあるんですけど、パターンが必要なものは、切り出すのもへたくそなのでどうにかしてCSSで実装したい！ 😈
でもどんなことができるのか忘れてしまう！！という私のために、今回はギザギザ（山が連なってるやつ）となみなみの下線をCSSでできそうなので備忘録として残しておきます。

ギザギザを作る（山が連なってるやつ）

ギザギザで下線を作ってみる！

どうでしょう？新選組のやつみたいですね～！色を可愛い感じにするとポップになるきがします！もう少し幅を大きくしてもかわいいかもしれないですね！ 😎

cssはこんな感じになります。結構簡単にできました！

.giza{
    font-size: 20px;
    padding-bottom: 5px;
    background: linear-gradient(-135deg, #ffffff 4px, transparent 0) 0 4px, linear-gradient(135deg, #ffffff 4px, #ff0000 0) 0 4px;
    background-color: #ffffff;
    background-position: left bottom !important;
    background-repeat: repeat-x !important;
    background-size: 8px 8px;
}

なみなみをつくる

なみなみで下線をオシャレにしたい！

どうでしょう？これはtext-decorationで実装してるだけなので、文字と違う色にはできないのが残念ですよね。
spanとかでくくって大事なところにマーカーとして使うくらいがいいのかもしれないです。
あと、とっても大切なんですが、FireFoxとChromeでしか実装確認できませんでした。
なのであまり実用的ではないですね～。

cssはこんな感じです！実装自体は簡単でした！