どうも、チャーさんです。
あなたはcssで三角を作る方法を、
探していますか？
この記事ではcssで三角を作る方法を、
書いています。
そしてこの記事を読めば、
以下のような三角をcssで作れるように、
なります。
ちなみに向きは上下左右どれも
できるようになります。
なので、あなたがcssで三角形を作りたいなら、
ぜひこのまま読んでみてください。
スポンサードサーチ
cssで三角を作るコード
はい、ということでまず結論から書きます。
cssで三角を作る方法ですが、
まずコードを紹介すると、以下です。
html
<div class=”triangle”></div>
css
.triangle {
border-top:50px solid black;
border-right:50px solid transparent;
border-left:50px solid transparent;
border-bottom:50px solid transparent;
width:0px;
}
上記をコピペすると、
記事冒頭で紹介したような画像の三角が、
出来上がります。
スポンサードサーチ
cssで作る三角の向きを変える方法
で、予告した通りもちろん下向きの三角だけでなく、
上下左右、どちらの向きにもできます。
例えば、
.triangle {
border-top:50px solid transparent;
border-right:50px solid black;
border-left:50px solid transparent;
border-bottom:50px solid transparent;
width:0px;
}
上記のようにcssをかくと、
今度は左がとんがった三角になります。
で、この三角の向きですが、
どこをtransparentにしないかで、
向きがコントロールできます。
例えば、上記のcssをみていただくと、
border-rightがblackで、transparentに、
なっていないですよね。
ちなみに一番最初に紹介した、
下向きの三角のcssの記述は、
.triangle {
border-top:50px solid black;
border-right:50px solid transparent;
border-left:50px solid transparent;
border-bottom:50px solid transparent;
width:0px;
}
上記でして、border-topの部分が、
blackになってますね。
こんな風に、borderのどこをblackにするかで、
三角の向きを変えることができます。
なので、例えば今度は右向きの三角にしたければ、
.triangle {
border-top:50px solid transparent;
border-right:50px solid transparent;
border-left:50px solid black;
border-bottom:50px solid transparent;
width:0px;
}
上記のように書けばokです。
このようにして、
三角の向きを操れるので、
ぜひやってみてください。
注意点
ちなみにcssで三角作る時ですが、
widthを０にするのがポイントです。
widthを０にせずに、
borderだけ設定しても三角にならないので、
注意してください。
スポンサードサーチ
まとめ
それではまとめに入ります。
cssで三角を作りたい場合、
borderとwidthを使えば可能です。
コード例は以下です。
html
<div class=”triangle”></div>
css
.triangle {
border-top:50px solid black;
border-right:50px solid transparent;
border-left:50px solid transparent;
border-bottom:50px solid transparent;
width:0px;
}
上記を記述すればcssで三角を表示できるので、
ぜひやってみてください。
さて、それでは早速ですが、
あなた自身で三角を表示してみましょう。
コードは上で書いたのを参考にしてください。
それをやるとあなたのwebページ制作スキルが、
アップしますよ。
それでは読んでもらってありがとうございました。
チャーさん
