gaaamiiのブログスマートフォン用の表示で見るgaaamiiのブログ間違ったことを書いている時があります。CodePenCSSでいろいろ描けるようになっておきたいなという気持ちだけは以前からあったものの、これまでちゃんとキャッチアップできていませんでした。簡単なものからということで、●と▲と■をCSSで描いて、その実装方法について書いておきたいと思います1。■これは、widthとheightと背景色を指定するだけですね。●も簡単で、直径の半分をborder-radiusに指定すると円になります。▲はちょっと難しかったです。triangleで検索してみると、以下のジェネレータが出てきました。http://apps.eky.hk/css-triangle-generator生成されたCSSは以下のようになっています。transparent;なるほど(わからん)。わからないので、詳しく見ていきます。border-widthまずは、MDNでborder-widthのページを見てみます。左の指定になるみたいです。三角形になるのか理解できません。#007bff;にすればただの正方形になるので、border-colorの指定が肝なのでしょう。MDNMDNには、border-colorに4つの値を指定したときの例が載っています。色をつけてみるとわかりやすいです。borderは上下左右指定すると、それぞれが台形になるんですね。それぞれ別の色を指定すれば、きれいに三角形ができるまでの過程がわかりやすいので、アニメーションさせてみました。CodePen.それぞれのborder-widthをboxの幅の半分に指定したところ、boxの中身が全部borderで埋め尽くされ、きれいに三角形で四等分されました。0にしておかないとbox内の領域をそのまま保とうとしてしまうので、boxに大きいborderが付くだけになってしまうので注意です。下のborderだけ色を付けほかは透明にすることで、色をつけたところの三角形だけが表示される感じになっていたのです。伸ばしたい辺のborder-widthをboxと同じ長さに、かつ向かい合う辺のborder-widthを0に、それ以外の辺はboxと半分の長さにすることで、いい感じにboxの幅と同じ長さの底辺の二等辺三角形が描けました。まとめ今回、CodePenで書きながら一通り確認しました。書いたものも一応公開してるので興味ある人は見てみてください。CodePen.三角形の描き方を理解するのに思ったより時間がかかりましたが、とりあえずは●▲■の描き方を覚えられたので、次はこれを組み合わせていろんな形の表現に挑戦していきたいと思います。調べたらElmのロゴをCSSで描いてる人がいた2ので、自分でもいずれチャレンジしてみたいです。13:45Tweet関連記事2014-04-25SinatraとjQueryでおよそ100行で作るAjax掲示板アプリケーションWeb2.0と言われ始めた時代に、Ajaxという手法が広まりました。...2013-11-14初心者がウェブアプリ作り出す前のざっくりした理解のためのエントリこの記事の対象は「サーバーって何?」くらいの人を想定してい...2013-08-20【CSS3】リンクhover時の変化をふわっとさせるやつ(transition)簡単すぎわろた「CSS3でアニメーション!」とかいうとなんだか難しいことを新...2013-04-03はじめて「レスポンシブウェブデザイン」なるものに挑戦しました先日公開したアンテナサイト「ソフ速」。(7)スターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。