CSSの形状の説明:純粋なCSSを使用して円や三角形などを描画する方法

始める前に。より多くの無料コンテンツがビデオ形式で必要な場合。フロントエンドコーディングに関する毎週のビデオを公開しているYoutubeチャンネルをお見逃しなく。

//www.youtube.com/user/Weibenfalk

----------

Web開発とCSSは初めてですか?インターネットで見られるような素敵な形がどのように作られているのか疑問に思ったことはありませんか?もう不思議ではありません。あなたは正しい場所に来ました。

以下では、CSSを使用してシェイプを作成するための非常に基本的なことを説明します。このトピックについてあなたに話すことがたくさんあります!したがって、すべての(すべてではない)ツールとシェイプについては説明しませんが、CSSを使用してシェイプを作成する方法の基本的な考え方を説明します。

一部の形状には、他の形状よりも多くの「修正とトリック」が必要です。CSSを使用して図形を作成するには、通常、幅、高さ、上、右、左、境界線、下、変換、および:before:afterなどの疑似要素を使用します。また、shape-outsideclip-pathのような形状を作成するための最新のCSSプロパティもあります。それらについても以下に書きます。

CSSシェイプ-基本的な方法

CSSでいくつかのトリックを使用することにより、通常のCSSプロパティを使用して正方形三角形などの基本的な形状を常に作成することができました。それらのいくつかを見てみましょう。

正方形と長方形

正方形と長方形はおそらく達成するのが最も簡単な形です。デフォルトでは、divは常に正方形または長方形です。

以下のコードに示すように、幅と高さを設定します。次に、要素に背景色を付けるだけです。要素に必要な他のプロパティを設定できます。

#square { background: lightblue; width: 100px; height: 100px; }

サークル

円を作成するのはほぼ同じくらい簡単です。円を作成するには、要素にborder-radiusを設定します。これにより、要素に湾曲したコーナーが作成されます。

50%に設定すると、円が作成されます。別の幅と高さを設定すると、代わりに楕円形になります。

#circle { background: lightblue; border-radius: 50%; width: 100px; height: 100px; }

三角形

三角形は少し注意が必要です。三角形に一致するように要素の境界線を設定する必要があります。要素の幅と高さをゼロに設定すると、要素の実際の幅は境界線の幅になります。

要素の境界エッジは互いに45度の対角線であることに注意してください。そのため、このメソッドは三角形を作成するために機能します。境界線の1つを単色に設定し、他の境界線を透明に設定すると、三角形の形になります。

#triangle { width: 0; height: 0; border-left: 40px solid transparent; border-right: 40px solid transparent; border-bottom: 80px solid lightblue; }

別の方向を指す三角形/矢印が必要な場合表示する側に対応する境界線の値を変更できます。または、本当に凝ったものにしたい場合は、transformプロパティを使用して要素を回転させることができます。

 #triangle { width: 0; height: 0; border-top: 40px solid transparent; border-right: 80px solid lightblue; border-bottom: 40px solid transparent; }

了解しました。これは、CSSを使用した基本的な形状の概要です。作成することを考えることができる形状はおそらく無限にあります。これらは基本的なことですが、少しの創造性と決意で、基本的なCSSプロパティだけで多くのことを達成できます。

場合によっては、より高度な形状では、:afterおよび:before疑似セレクターを使用することもお勧めします。これはこの記事の範囲外ですが、私の意図はあなたを動かすための基本をカバーすることです。

不利益

上記のアプローチには1つの大きな欠点があります。たとえば、テキストを流してシェイプを折り返したい場合です。形状を構成するための背景と境界線を持つ通常のHTMLdivでは、それは許可されません。テキストはあなたの形に適応して流れません。代わりに、div自体(正方形または長方形)の周りを流れます。

以下は、三角形とテキストの流れを示す図です。

幸い、代わりに使用できる最新のCSSプロパティがいくつかあります。

CSSシェイプ-他の方法

Nowadays we have a property called shape-outside to use in CSS. This property lets you define a shape that the text will wrap/flow around.

Along with this property we have some basic shapes:

inset()

circle()

ellipse()

polygon()

Here's a tip: You can also use the clip-path property. You can create your shape with that in the same way, but it won't let the text wrap around your shape like shape-outside does.

The element that we are going to apply the shape to with the shape-outside property to has to be floated. It also has to have a defined width and height. That's really important to know!

You can read more about why here. Below is also a text that I've taken from the provided link to developer.mozilla.org.

shape-outsideプロパティは、フロート要素のフロート領域を定義する以下のリストからの値を使用して指定されます。フロート領域は、インラインコンテンツ(フロート要素)がラップする形状を決定します。

inset()

inset()タイプを使用して、折り返しテキストのオプションのオフセットを使用して長方形/正方形を作成できます。これにより、折り返しテキストを図形に重ねる量の値を指定できます。

inset(20px)のように、オフセットを4つの方向すべてで同じになるように指定できますまたは、方向ごとに個別に設定することもできます:inset(20px 5px 30px 10px)

他の単位を使用して、パーセントなどのオフセットを設定することもできます。値は次のように対応します:inset(右上下左)

Check out the below code example. I've specified the inset values to be 20px at the top, 5px to the right, 30px at the bottom and 10px to the left. If you want your text to go around your square instead you can just skip using inset() at all. Instead set the background on your div and specify the size as usual.

 #square { float: left; width: 100px; height: 100px; shape-outside: inset(20px 5px 30px 10px); background: lightblue; }

It is also possible to give inset() a second value that specifies the border-radius of the inset. Like below:

 #square { float: left; width: 100px; height: 100px; shape-outside: inset(20px 5px 30px 10px round 50px); background: lightblue; }

circle()

In this one a circle is created using the shape-outside property. You also have to apply a clip-path with the corresponding property for the circle to show up.

The clip-path property can take the same value as the shape-outside property so we can give it the standard circle() shape that we used for shape-outside. Also, note that I've applied a 20px margin on the element here to give the text some space.

#circle { float: left; width: 300px; height: 300px; margin: 20px; shape-outside: circle(); clip-path: circle(); background: lightblue; }

In the above example, I don't specify the radius of the circle. This is because I want it to be as big as the div is (300px). If you want to specify a different size for the circle you can do that.

The circle() takes two values. The first value is the radius and the second value is the position. These values will specify the center of the circle.

In the below example I've set the radius to 50%. Then I have shifted the center of the circle by 30%. Note that the word "at" has to be used between the radius and position values.

I've also specified another position value on the clip-path. This will clip the circle in half as I move the position to zero.

 #circle { float: left; width: 150px; height: 150px; margin: 20px; shape-outside: circle(50% at 30%); clip-path: circle(50% at 0%); background: lightblue; }

ellipse()

Ellipses work the same way as circles except that they create an oval. You can define both the X value and the Y value, like this: ellipse(25px  50px).

The same as a circle, it also takes a position value as the last value.

 #ellipse { float: left; width: 150px; height: 150px; margin: 20px; shape-outside: ellipse(20% 50%); clip-path: ellipse(20% 50%); background: lightblue; }

polygon()

A polygon is a shape with different vertices/coordinates defined. Below I create a "T" shape which is the first letter in my name. I start from the coordinates 0,0 and move from left to right to create the "T" shape.

#polygon { float: left; width: 150px; height: 150px; margin: 0 20px; shape-outside: polygon( 0 0, 100% 0, 100% 20%, 60% 20%, 60% 100%, 40% 100%, 40% 20%, 0 20% ); clip-path: polygon( 0 0, 100% 0, 100% 20%, 60% 20%, 60% 100%, 40% 100%, 40% 20%, 0 20% ); background: lightblue; }

Images

You can also use images with transparent backgrounds to create your shape. Like this round beautiful moon below.

This is a .png image with a transparent background.

#moon { float: left; width: 150px; height: 150px; shape-outside: url("./src/moon.png"); }

And that's it! Thank you for reading.

About the author of this article

My name is Thomas Weibenfalk and I'm a developer from Sweden. I regularly create free tutorials on my Youtube channel. There's also a few premium courses out there on React and Gatsby. Feel free to visit me on these links:

Twitter — @weibenfalk,

Weibenfalk on Youtube,

Weibenfalk Courses Website.