このサイトは、只今WEB業界で活躍中のデザイナー、プログラマーの方々の情報を集めたweb統合情報サイトです。

Archives Details

iPhoneサイトで使える CSS3で三角形作成応用編

iPhone

2011.09.20

この記事は最終更新日から1年以上が経過しています。

前回の

CSSで図形 三角形&台形

の応用で、二等辺三角形、ひし形を使い色々な図形を作成します。

まず、復習です。

HTML

<div id="triangle"></div>

CSS3

#triangle {
  height:0px;
  width:0px;
  border:50px solid #000;
  border-color:transparent;
  border-top-color:#000;
}

これで、

このような図形ができます。

border-top-colorを、border-bottom-color、border-left-color、border-right-color、に

それぞれ変更すると、

こうなる。

では、最初のcssをちょっとばらしてみましょう、

#triangle {
  height:0px;
  width:0px;
  border-top:#000 50px solid;
  border-left:50px solid transparent;
  border-right:50px solid transparent;
  border-bottom:50px solid transparent;
}

ばらしてみるとこうなります。最初に書いた記述より多くなるが、描画される結果は一緒。

上向き三角形は

border-bottom:#000 50px solid;

と記述し、その他のborderを

border-○○:50px solid transparent;

とすればよい。

同様に上向き、右向き、左向きの三角形は、向けたい方向(逆のボーダー)に#000 50px solidを

設定すればそれぞれの三角形ができます。

正三角形じゃなく、二等辺三角形、ひし形に挑戦。

ただ、値を変化すれば二等辺三角形はできます。

#triangle {
  height:0px;
  width:0px;
  border-top:0px solid transparent;
  border-left:20px solid transparent;
  border-right:20px solid transparent;
  border-bottom:#000 60px solid;
}

leftとrightの値を等しくすれば二等辺三角形の完成です。

直角三角形は左右の値を0にしちゃえば

#triangle {
  height:0px;
  width:0px;
  border-top:0px solid transparent;
  border-left:0px solid transparent;
  border-right:20px solid transparent;
  border-bottom:#000 40px solid;
}

こんな感じにできちゃいます。

ではひし形。

まず、左向きの二等辺三角形を作成。

#triangle {
  height:0px;
  width:0px;
  border-top:20px solid transparent;
  border-left:0px solid transparent;
  border-right:#000 40px solid;
  border-bottom:20px solid transparent;
}

こんな感じで表示される。

色々なやり方があるのですが、簡単なやり方は、

反射させるプロパティbox-reflectを使いましょう!

css3のbox-reflectプロパティは、図形や画像を反射させて表示することが可能です!

ここでは、値をrightに設定。

-webkit-box-reflect:right;

この一行を加えるだけで、

あらま。ひし形の完成!

#triangle {
  height:0px;
  width:0px;
  border-top:20px solid transparent;
  border-left:0px solid transparent;
  border-right:#000 40px solid;
  border-bottom:20px solid transparent;
  -webkit-box-reflect:right;
}

数値を変えることで

変形も可能!!

これらを応用し、さまざまなアイコンが作成出来ちゃいます!

デモ画面はこちらから

Comment

Related Article

【保存版】iPhoneだけで web開発できる 無料アプリをまとめてみました。2016年版

2016.04.22

iPhone6でバックアップから復元出来ない問題

2014.09.23

iPhone5 バッテリー交換プログラム 交換出来ず!

2014.09.15

iTunesで 「iPhoneの内容を読み込めません」エラー等の回避 「DiskAid」アプリでiPhoneのデータをバックアップ

2014.04.29

iPhoneの画面をキャプチャし動画撮影する方法 Reflector

2013.03.24

iPhoneで未開封メール全て開封済みにする

2012.10.13

iOS6にて-webkit-fillterプロパティが対応

2012.10.03

無料で使えるiPhone5のモックアップ用ベクター素材が早くも登場

2012.09.23

CSS3で作成 iPhone風 アイコン

2011.09.20

CSS Media Queries(メディアクエリ)を使用した指定方法

2011.09.20

CATEGORY LIST

LATEST NEWS

このコロナ禍で、飛沫感染防止など求められる中「電子メモパッド」が重宝。 1300円で購入可能な電子メモパッドが超絶便利な件。

tool

2020.06.02

OAuthのフローを可視化できるツールを作ってみました。

JavaScript

2020.05.17

Django django-allauthで、サクッとソーシャルログイン機能を実装

Python

2020.04.12

部下を育てる技術

イベント

2020.04.08

令和の時代に、JavaScriptで Shift-JISファイル作成 全銀データフォーマットに対応する。

JavaScript

2020.03.03

インターネットにて世論調査を行う「世論Web」サービスを始めてみました。

JavaScript

2020.01.31

まだ間に合う!!ラズベリーパイ購入なら「RSコンポーネンツ」で!最大40%オフの年に1度の大特価期末セール中!

RaspberryPi

2020.01.25

年末のレトロゲーム熱の際、ファミコンソフト一覧パッケージ作ってました。

JavaScript

2020.01.24

TSUKUMO の初売りでNAS (Synology DiskStation DS218j)購入!!

イベント

2020.01.04

Mac用 エミュレーター 「OpenEmu」が、V2.2リリース!GameCube対応して更に神アプリ進化!

Game

2020.01.01

この時期になると、やたらレトロゲームをやりたくなるのはなんですかね?ハードオフに向かうの巻その2

Game

2019.12.31

この時期になると、やたらレトロゲームをやりたくなるのはなんですかね?ハードオフに向かうの巻

Game

2019.12.14

RANKING

Follow

SPONSOR

現在、掲載募集中です。



Links

About Us

WEBデザイナーの、WEBデザイナーによる、WEBデザイナーの為のサイト。「みんなで書こう!」と仲間を募ってみたが、結局書くのは自分だけとなってしまいました。日々のメモを綴っていきます。

Entry Profile

Graphical FrontEnd Engineer
- Daisuke Takayama

MAD CITY 北九州市で生まれ育つ。20代はバンド活動に明け暮れ、ふと「webデザイナーになりたい。」と思い、デジタルハリウッド福岡校入学。卒業後、数々の賞を受賞、web業界をざわつかせる。
現在、主に、ゲーム制作中心に港区六本木界隈で活動中。

FOLLOW US