Web Service

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

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

[ads_center]

使い方

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

アイコンが追加

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

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

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

日本語設定

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

方向を指定

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

タイプを選択

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

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

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

サンプル

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

関連記事

  1. Web Service

    あとで読むiPhoneアプリ「Read It Later」の基本的な設定や簡単な使い方

    あとで読むためのiPhoneアプリ「Read It later」が流行…

  2. Web Service

    pxからemに文字サイズを変換してくれるツール「px-em」

    最近ではレスポンシブWebデザインなどで文字サイズにemを使う機会も増…

  3. Type Zebra

    Web Service

    自分のパソコン内に入っているフォントを確認できる「Type Zebra」

    自分のパソコン内に入っているフォントを確認できる「Type Zebra…

  4. flatuicolorpicker

    Web Service

    フラットデザインの色の見本(RGB、HEX)が豊富にある「flatuicolorpicker」

    フラットデザインを取り入れる上で難しいのが色の選択。実際にどのような色…

  5. WebGradients

    Web Service

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

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

  6. Web Service

    キャッチコピーや文章作成に便利!類語を教えてくれる「文章リライトツール」

    ブログを書いたりキャッチコピーをつくったり文章作成するひとにとって役立…

コメント

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

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

最近の記事

  1. macOS Mojaveのダークモード
  2. Olli
  3. 単語帳メーカー(Flashcard Maker App)
  4. 1Password 7

Facebookページ

PAGE TOP