By U Zensen.

欲しいものはプログラミングで自分で作る。

もう調べ直さなくて大丈夫!!borderを理解して三角形を作る方法を覚えよう!!

2015 / 11 / 27
CSS
CSSで三角形をつくる方法

はじめに!!

お疲れ様です。ぴーすけと申します。

さて、今回はCSSで三角形を作る方法を解説します。吹き出しを作る時などに便利なこの方法ですが、なかなか覚えることができず毎回調べ直して作成することが多かったので、私はこうやって覚えたという方法を解説します。

スポンサードリンク

CSSで三角形を作るにはborderを使う!!

まずはborderの仕組みと書き方を理解しましょう。

1
//ボーダーの位置ごとに種類と太さと色を設定する方法
border-top: 10px solid red;
border-right: 10px solid green;
border-bottom: 10px solid black;
border-left: 10px solid blue;

//またはボーダー全体の設定をする方法
border-style: solid solid solid solid;
border-width: 10px 10px 10px 10px;
border-color: red green black blue;

//↓さらに最適化
border-style: solid;
border-width: 10px;
border-color: red green black blue;

上記の結果はすべて一緒になります。

borderは中の要素の外側に線が引かれるので、中の要素を空にすることによって四角を作成することができます。borderを引く要素にwidth:0px;とheight:0pxを指定しましょう。

2

あとは余分な線を消すだけ。線を消すには消したい線の色のところに「transparent」(透明)を指定します。

3
//ボーダーの位置ごとに種類と太さと色を設定する方法
width: 0px;
height: 0px;
border-top: 10px solid red;
border-right: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 10px solid transparent;

//またはボーダー全体の設定をする方法
width: 0px;
height: 0px;
border-style: solid solid solid solid;
border-width: 10px 10px 10px 10px;
border-color: red transparent transparent transparent;

//↓さらに最適化
width: 0px;
height: 0px;
border-style: solid;
border-width: 10px;
border-color: red transparent transparent transparent;

上記のCSSを指定すると以下のような三角形ができます。

あとはafterやbeforeを利用して吹き出しっぽくできます!!

吹き出しを作るには本体となる要素のafterあるいはbeforeに上記の方法で三角形を作り、position:absoluteなどで好きな位置に配置することで完成です。こんな感じ。

test
//CSS
.test {
    position: relative;
    padding: 20px;
    background: #aaa;
    color: white;
    display: inline-block;
    width: 109px;
    border-radius: 6px;
    text-align: center;
}
.test:after {
    content: "";
    width: 0px;
    height: 0px;
    position: absolute;
    bottom: -40px;
    border-style: solid;
    border-width: 24px;
    border-color: #aaa transparent transparent transparent;
    right: 18px;
}
//html
<div class="test">test</div>

まとめ!!

忘れがちなのは、いらない線に「transparent」ということですかね。

これさえ忘れずにいれば三角形を作る際に毎回調べ直さなくて済むとおもいます。あと、吹き出しを作る際には、afterかbeforeにborderを使って三角形を作って、それをpositionを使って場所を変えるということです。それさえ覚えておけば調べ直すことなく吹き出しを作ることができるはず!

Pocket

コメント

コメントを残す