Web Service

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

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

[ads_center]

使い方

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

アイコンが追加

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

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

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

日本語設定

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

方向を指定

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

タイプを選択

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

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

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

サンプル

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

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

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

関連記事

  1. CSS3 Box Shadow Generator
  2. Web Service

    PNG画像をブラウザ上にアップロードするだけでファイルサイズを圧縮することができる「PunyPNG」…

    ブラウザ上でローカルに保存してある画像をアップロードするだけで簡単にフ…

  3. Web Service

    かっこいいボタンやフォーム、かわいいリボンなんかが作れるCSSジェネレーター「Live Tools」…

    とても簡単にかっこいいボタンやフォームが作れちゃうCSSジェネレーター…

  4. TodaysList

    Web Service

    シンプルで美しいToDoリスト「TodaysList」

    とてもシンプルで美しいToDoリストを発見したのでご紹介します。「To…

  5. Web Service

    ブログで使うCC(クリエティブコモンズ)対象の画像をFlickrやGoogleから簡単に探してくれる…

    ブログでその記事に関連するアイキャッチ画像を入れたりしたい時があるかと…

  6. placekitten

    Web Service

    Webサイト作成時に可愛い猫のダミー画像を用意してくれる「placekitten」

    とても素敵なWebサービスがあったのでご紹介します。Webサイトを作成…

コメント

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

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

最近の記事

  1. 濃いアーモンドミルク
  2. COMOLI ベタシャンプルオーバーシャツ
  3. ユニクロ エアリズム マイクロメッシュVネックT(半袖)
  4. ライオン システマ 超コンパクト ふつう
  5. タリーズ ハムチーズ&サラダサンド

アーカイブ

PAGE TOP