css3で三角形を作るとcssに関するMooooly777のブックマーク (2)

  • CSSのclip-pathプロパティで使うコードを手軽に作成出来る・「Clippy」

    Clippyはclip-pathプロパティで使うコードを手軽に作成出来るツールです。用意されたサンプル画像に重ねて確認しながら作成するだけでコードを出してくれます。手軽で良いのでは。尚、画像をアップロードして~と言った類のものではなく、シンプルにclip-pathのコードを作成するだけのツールになります。 Clippy

    CSSのclip-pathプロパティで使うコードを手軽に作成出来る・「Clippy」
  • CSS3を極めたいなら知っておきたい三角形を作る3つの方法

    CSS3を使い始めていくと、ぶつかる壁に「三角形みたいに尖った角」をどう表現するかというのがあります。三角形って思ったより難しいです。 まぁ無理しないで、イメージで作ればいいんですけど、ちょっとした装飾だったりすると、ちょこっとCSSで作れると楽な時もあります。 そこで、CSS3で「三角形みたいに鋭角を作る方法」を3つ紹介します。ここで紹介する方法には、メリットとデメリットがありますので、使い分けれるようになるといいと思います。 1. グラデーションを使う こちらの記事でも紹介しましたが、背景を background-size と background-position で4分割して、斜めのグラデーションを使うことで角を落とすことができます。 コード 4分割して、4つのグラデーションでそれぞれを塗ります。この方法では、塗りを使っているので、カスタマイズ性が高いですが、グラデーションを使って

    CSS3を極めたいなら知っておきたい三角形を作る3つの方法
  • 1