三角形を作る方法
CSSで三角形を作るには、border関連のプロパティを活用しましょう。
サンプルコード
div {
border: 50px solid transparent ;
width: 0px ;
height: 0px ;
border-bottom-color: red ; /* 上向きの場合 */
}
デモ
上向き
<!-- このコードは編集できます。 -->
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 50px solid transparent ;
width: 0px ;
height: 0px ;
border-bottom-color: red ;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
左向き
<!-- このコードは編集できます。 -->
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 50px solid transparent ;
width: 0px ;
height: 0px ;
border-right-color: red ;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
下向き
<!-- このコードは編集できます。 -->
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 50px solid transparent ;
width: 0px ;
height: 0px ;
border-top-color: red ;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
右向き
<!-- このコードは編集できます。 -->
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 50px solid transparent ;
width: 0px ;
height: 0px ;
border-left-color: red ;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
備考
三角形の正体は枠線です。枠線の1方向だけに色を付けると三角形になります。まずは横幅と高さが0pxの要素に枠線を付けてみましょう。ちょうど正方形になります。
div {
width: 0 ;
height: 0 ;
border: 50px solid #000 ;
}
次に各方向の色を変更してみましょう。そうすると枠線がどうなっているか分かります。
div {
width: 0 ;
height: 0 ;
border: 50px solid #000 ;
border-top-color: red ;
border-right-color: blue ;
border-bottom-color: green ;
border-left-color: purple ;
}
残したい以外の方向の色を透明にしてしまえば、三角形の完成ですね。
div {
width: 0 ;
height: 0 ;
border: 50px solid #000 ;
border-top-color: red ;
border-right-color: transparent ;
border-bottom-color: transparent ;
border-left-color: transparent ;
}
関連記事
- ホバーした時に回転させる方法
- 画像などを回転させるには、transformプロパティを利用します。
- ホバーした時に透過させる方法
- 画像などを透過させるには、opacityプロパティを利用します。
- dl要素を横並びにする方法
- dl要素を横並びに表示するには、dt要素にfloat: leftを適用し、dd要素の左余白を設けます。
- URLなど半角英数の途中で強制的に折り返す方法
- word-breakプロパティにbreak-allを指定すれば、urlなど半角文字列の途中でも行末で強制的に折り返してくれます。
- 画像や要素の角を丸める方法
- 画像などの角を丸めるには、border-radiusプロパティを利用します。
- テキストに影を付ける方法
- テキストに影を付けるには、text-shadowを利用します。