CSSでborderを使わないで三角形を作る方法マンガでわかるホームページ作成ホームへCSSでborderを使わないで三角形を作る方法2020年02月17日こんにちは。ホームページを作り続けて9年になります。CSSで三角形を作る方法といえばborderを使う方法です。これは調べればたくさん情報がでてきます。この記事ではCSSでborderを使わないで三角形を作る方法をお伝えします。backgroudを使います。50%;}widthとheightを調整することで三角形のサイズも直感的に変更できます。解説backgroundではグラデーションを表現することができます。linear-gradient(black,red)}向きを左下から~に変えます。それぞれ中央(50%)にします。どちらも50%にすると境目がガキガキになるので51%にしています。51%)この三角を上半分に詰めます。heightは変更していません。50%同じ要領で左上からのグラデーションを重ね掛けします。それぞれ中央(50%)にします。51%)この三角を下半分に詰めます。50%;あとは色を変えれば完成です。背景を透明にするにはtransparentを指定するとOKです。CSSやhtmlの基本をしっかり理解すると、この記事の内容もより理解できるようになりますよ。↓CSSやhtmlを楽しく学べるようにマンガを描きましたのでゼヒご覧ください↓htmlやCSSをマンガで楽しく学ぼう【180ページ単行本1冊相当量】htmlから収益化までホームページ作成の基本をひととおり、マンガでクスっと笑いながら学べます。9年間ホームページを作ってきた作者の実績に基づき作られた確かな内容です。この記事を読むまとめborderを使わず、backgroudで三角形を作ることができました。width,heightに応じて形が変わるのでborderを使うパターンより様々な表現ができるかと思います。今回は左向きの三角形でしたが、応用すれば向きの変更や直角三角形もできますね。以上、CSSでborderを使わず三角形を作る方法でした。「この記事の内容がよくわからなかった...」「なんかうまくいかなかった...」というかたは下記記事↓でhtmlとCSSの基本を学びましょう。わからないまま突き進むより基本を学ぶのが結局近道です。htmlやCSSをマンガで楽しく学ぼう【180ページ単行本1冊相当量】htmlから収益化までホームページ作成の基本をひととおり、マンガでクスっと笑いながら学べます。9年間ホームページを作ってきた作者の実績に基づき作られた確かな内容です。マンガでわかるホームページ。