Web Service

CSSで簡単に三角形を作ってくれるChrome拡張機能「CSS三角形作成ツール」

ちょっと面白かったのでご紹介します。Chromeの拡張機能で、CSSで簡単に三角形を作成できるツール「CSS三角形作成ツール」です。その名の通り、サクっと三角形を作ってくれます。出来上がったコードはコピーして使用できます。

[ads_center]

使い方

CSS三角形作成ツールをインストールするとChromeのトップ画面にアイコンが追加されます。

アイコンが追加

アイコンをクリックして、CSS三角形作成ツールのページに行きます。こんな感じの画面になり、ここで三角形を作成できます。

CSS三角形作成ツールにアクセス

初期画面は英語なので、日本語にしたい場合は右上にある「日本語」をクリックします。

日本語設定

最初に三角形の方向を決めます。「上、右上、右、右下、下、左下、左、左上」の中から選択できます。

方向を指定

次にタイプを選択します。「正三角形、二等辺、不等辺」から選べます。ただし、最初の方向で、右上、右下、左下、左上を選択している場合は「二等辺か不等辺」のどちらかになります。

タイプを選択

あとは、好きなサイズや色を設定して、右側にあるコードを取得すればOKです。

サイズや色を選択してコードを取得

シンプルで使いやすいですね。実際に使ってみると、こんな感じで簡単にCSSで三角形を作ることができました。

サンプル

CSSで三角形を作る場合には活用していきたいですね。以下からインストールできます。

ナビゲーションをレスポンシブデザインにしてくれるjQueryプラグイン「HorizontalNav」前のページ

チルトシフト効果でミニチュア風の写真に仕上げてくれるjQueryプラグイン「tiltShift.js」次のページ

関連記事

  1. Web Service

    iPhoneアプリのRead it LaterがPocketにリニューアルしたので使ってみたらヤバか…

    ふと、iPhoneを弄っていたらアップデートできるアプリがあったのでし…

  2. Web Service

    Mac版Pocketがリリースされたのでさっそく使ってみた!

    あとで読むサービスのPocketがMacのアプリでついに登場していたの…

  3. Web Service

    iPhoneの人気のカメラアプリ「プロカメラ」がすごくよかったのでその基本的な使い方

    iPhoneアプリで人気の高いカメラアプリ「プロカメラ」を使ってみまし…

  4. WebGradients

    Web Service

    CSSやPNG形式に対応した180種類のグラデーションを活用できる「WebGradients」

    WebGradientsは、180種類ものグラデーションが用意されたコ…

  5. PageSpeed Insights

    Web Service

    Webサイト高速化にするための必要項目を教えてくれるGoogleツール「PageSpeed Insi…

    Webサイトを高速化にするために必要な項目を教えてくれるGoogleツ…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

最近の記事

  1. ナイトロコーヒー
  2. チーズベーコンエッグバーガー
  3. ランチセットA
PAGE TOP