Oops! It appears that you have disabled your Javascript. In order for you to see this page as it is meant to appear, we ask that you please re-enable your Javascript!

css

cssで三角形を作る方法、コピペで一発でできますよ。

投稿日:

Pocket

うも、チャーさんです。

 

あなたはcssで三角を作る方法を、

探していますか?

 

この記事では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をかくと、

今度は左がとんがった三角になります。

 

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を0にするのがポイントです。

 

widthを0にせずに、

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ページ制作スキルが、

アップしますよ。

 

それでは読んでもらってありがとうございました。

 

 

チャーさん

-css

スポンサードサーチ

関連記事

no image

cssで中央寄せ(縦に)したい場合にどうぞ

  どうも、チャーさんです。   あなたは縦に中央寄せできるcssを、 探していませんか?   この記事ではお手軽に縦の中央寄せができる、 cssを紹介しています。 &n …

no image

cssでドロップダウンメニューを作る方法

どうも、チャーさんです。   あなたはcssでドロップダウンメニューを 作りたいと思っていませんか?   この記事ではjavascriptなどを使わずに htmlとcssのみでドロ …

no image

コーダーがphotoshopを使えた方がいいのかについて書きます。

どうも、チャーさんです。   あなたはコーダーはphotoshopを、 学んだ方がいいのか?   仕事獲得のためには、コーダーも、 photoshopを使えた方がいいのか? と疑問 …

no image

ブートストラップを使う利点をわかりやすく説明します。習得方法も紹介。

  どうもチャーさんです。   あなたはブートストラップを使う利点は、 何だろうと思っていませんか?   css使えばデザインなんてできる、 何でわざわざブートストラップ …

no image

cssで背景画像を回転させる方法。1行書けばok

どうも、チャーさんです。   あなたはcssで背景画像を回転させたい。 そう思っていませんか?   この記事ではcssを使って、 背景画像を回転させる方法を書いています。 &nbs …

no image

cssの書き方これらのセレクタを知ってればほぼ困りません

どうも、チャーさんです。   あなたはcssの書き方でセレクタに ついて色々な書きかたがあってよくわかってない、 と感じていませんか?   この記事では様々なセレクタの指定方法を …

no image

cssを最初の要素にのみ適用する方法

どうも、チャーさんです。   あなたはcssを最初の要素にのみ、 適用させたいがどうしたらいいか悩んでませんか?   この記事では、cssを最初の要素にのみ、 適用させれる方法を紹 …

no image

cssでボタンをレスポンシブ対応にする方法(微調整必要なしで楽ですよ)

どうも、チャーさんです。   あなたはcssでボタンをレスポンシブにしたい、 かつブレークポイントごとに微調整する手間ひまの、 必要のないボタンを作る方法はないかと思ってませんか? &nbs …

no image

cssで背景画像をレスポンシブ対応させる方法「1行記述すればok」

どうも、チャーさんです。   あなたはcssで背景画像をレスポンシブ対応させたい、 そう思っていませんか?   この記事では、cssで背景画像を、 レスポンシブ対応させる方法を書い …

no image

コーダーの仕事内容をわかりやすく紹介します。

どうもチャーさんです。   あなたはコーダーの仕事内容って、 どんなだろう? と思っていませんか。   またコーダーって具体的にどんなことをやってるんだろう? と疑問に思っていませ …

no image

cssの書き方で大なりと書くとどうなるか知りたいならこの記事。

どうも、チャーさんです。   あなたはcssの書き方で大なり (例 .class > p )のように書くと、 どう動くのか疑問に思ってませんか?   この記事では、大なりで書 …

no image

max-widthとmin-widthの違いについてわかりやすく説明します

どうも、チャーさんです。 あなたはmax-widthとmin-widthの 違いについて疑問を持ってますか?   この記事では、max-widthとmin-width の違いを説明してるので …

no image

cssでメニューに区切り線を表示させる方法

どうもチャーさんです。   あなたは、cssでメニューに区切り線を、 表示させたいと思っていませんか?     この記事では、以下の画像のような、 区切り線を表示させる方 …

no image

インライン要素にmarginの上下が効かない時の解決方法「簡単です」

  どうもチャーさんです。   あなたはインライン要素にmarginの上下を、 効かせたいのに効かなくて困ってませんか?   この記事では、そんな状態の解決方法を、 書い …

no image

cssの読み込み方法を3つ紹介「どれも簡単です」

どうも、チャーさん(@chaa___san)です。   あなたはcssの読み込み方法がわからず、 困っていますか?   この記事ではcssの読み込み方法を3つ紹介してます。 なので …

最新記事

チャーさん

プログラミング・筋トレ・unity系の記事などを書いてます。

大学卒業後→開業→個人事業主7年目ぐらいです。webサイト制作したり、unityでゲーム開発しております。

youtubeもやってまして、主にプログラミング動画とかunity系の動画をあげてるので見てください。