様々な三角形のCSSコードをコピーできるWebサービス「Triangle Shapes」

様々な三角形のCSSコードをコピーできるWebサービス「Triangle Shapes」

様々な三角形のCSSコードをコピーできるWebサービス「Triangle Shapes」

Triangle Shapesは、三角形のCSSコードをコピーできるWebサービスです。様々なタイプの三角形が用意されており、画像の三角形の切り抜きもコピペで簡単に実装できます。

Triangle Shapesの使い方

Triangle Shapesにアクセスして、利用したい三角形をクリックするだけです。

クリックすると下記のようなコードがコピーされますので、HTMLとCSSにコピペして使います。aspect-ratioとclip-pathで作成されていますね。

/* HTML: <div class="triangle"></div> */
.triangle {
  width: 180px;
  aspect-ratio: 1/cos(30deg);
  clip-path: polygon(50% 0,100% 100%,0 100%);;
  background: linear-gradient(45deg,#FA6900,#C02942);
}

上部にあるラジオボタンでimgを選択すると、画像の三角形が作成できます。

CSSはこんな感じです。divの三角形と同じですが、画像をclip-pathで切り抜いていますね。

/* HTML: <img class="triangle" src="" alt=""> */
.triangle {
  width: 180px;
  aspect-ratio: 1/cos(30deg);
  clip-path: polygon(50% 0,100% 100%,0 100%);;
  object-fit: cover;
}

あとがき

以前は下記のようにborderを使って三角形を作成していましたが、clip-pathの方が記述量も少なくなってわかりやすいかもですね。

.triangle {
  display: inline-block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 100px 173.2px 100px;
  border-color: transparent transparent #6980fe transparent;
}

三角形の表現を使いたい時は、ぜひTriangle Shapesをご活用ください。

この記事が気に入ったら
いいね!してね♪

Twitter で

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です