css 繪制三角形_解釋CSS形狀：如何使用純CSS繪制圓，三角形等

css 繪制三角形

Before we start. If you want more free content but in video format. Don't miss out on my Youtube channel where I publish weekly videos on FrontEnd coding. https://www.youtube.com/user/Weibenfalk----------Are you new to web development and CSS? Have you ever wondered how those nice shapes are made that you see all over the internet? Wonder no more. You've come to the right place.

在我們開始之前。如果您想獲得更多免費內容，但使用視頻格式。千萬不要錯過我的YouTube頻道，在這里我每周發布有關FrontEnd編碼的視頻。 https://www.youtube.com/user/Weibenfalk ----------您是Web開發和CSS的新手嗎？您是否想過如何在互聯網上看到那些漂亮的形狀？別再奇怪了。您來對地方了。

Below I will explain the very basics of creating shapes with CSS. There's a lot to tell you about this topic! Therefore I will not cover all (far from all) tools and shapes but this should give you a basic idea of how shapes are created with CSS.

下面，我將解釋使用CSS創建形狀的基本知識。關于這個話題， 有很多要告訴你的！因此，我不會涵蓋所有(絕大部分)工具和形狀，但這應該使您基本了解如何使用CSS創建形狀。

Some shapes require more "fix and tricks" than others. Creating shapes with CSS is usually a combination of using width, height, top, right, left, border, bottom, transform and pseudo-elements like :before and :after. We also have more modern CSS properties to create shapes with like shape-outside and clip-path. I'll write about them below also.

一些形狀比其他形狀需要更多的“技巧和竅門”。使用CSS創建形狀通常是使用寬度，高度，頂部，右側，左側，邊框，底部，變換和偽元素(例如：before和：after)的組合。 我們還具有更現代CSS屬性，可使用諸如shape-outside和clip-path之類的形狀來創建形狀。我也會在下面寫它們。

CSS形狀-基本方法 (CSS Shapes - The basic way)

By using a few tricks in CSS we've always been able to create basic shapes like squares, circles, and triangles with regular CSS properties. Let's look at a few of them now.

通過CSS使用一些技巧，我們總是能夠創造像正方形，圓形，并且與普通CSS屬性的三角形基本形狀。現在讓我們看看其中的一些。

正方形和矩形 (Squares and rectangles)

Squares and rectangles are probably the easiest shapes to achieve. By default, a div is always a square or a rectangle.

正方形和矩形可能是最容易實現的形狀。默認情況下，div始終是正方形或矩形。

You set the width and height as shown in the below code. Then it's just a matter of giving the element a background color. You can have whatever other properties you want on the element.

如下面的代碼所示，設置寬度和高度。然后，只需為元素提供背景色即可。您可以在元素上具有任何其他想要的屬性。

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

界 (
Circles)

It's almost as easy to create a circle. To create a circle we can set the border-radius on the element. This will create curved corners on the element.

創建圓幾乎一樣容易。要創建一個圓，我們可以在元素上設置邊框半徑。這將在元素上創建彎曲的角。

If we set it to 50% it will create a circle. If you set a different width and height we will get an oval instead.

如果將其設置為50％，將創建一個圓。如果您設置不同的寬度和高度，我們將得到一個橢圓形。

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

三角形 (Triangles)

Triangles are a little trickier. We have to set the borders on the element to match a triangle. By setting the width and height to zero on the element, the actual width of the element is going to be the width of the border.

三角形有點棘手。我們必須在元素上設置邊框以匹配三角形。通過將元素的寬度和高度設置為零，元素的實際寬度將成為邊框的寬度。

Keep in mind that the border edges on an element are 45 degree diagonals to each other. That's why this method works to create a triangle. By setting one of the borders to a solid color and the other borders to transparent it will take the form of a triangle.

請記住，元素的邊界邊緣彼此成45度對角線。這就是為什么此方法可以創建三角形的原因。通過將其中一個邊界設置為純色，而將其他邊界設置為透明，它將采用三角形的形式。

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

If you want to have a triangle/arrow pointing in another direction You can change the border values corresponding to what side you want to be visible. Or you can rotate the element with the transform property if you want to be really fancy.

如果要使三角形/箭頭指向另一個方向，則可以更改與要顯示的那一側相對應的邊框值。或者，如果您真的想花哨的話，可以使用transform屬性旋轉元素。

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

Alright – that's an intro to basic shapes with CSS. There are probably an endless amount of shapes you can think of to create. These are just the fundamentals, but with a little creativity and determination you can achieve a lot with just basic CSS properties.

好的-這是CSS基本形狀的簡介。您可能會想出無數種形狀。這些只是基礎知識，但是只要有一些創造力和決心，僅憑基本CSS屬性就可以實現很多目標。

In some cases, with more advanced shapes, it's also a good idea to use the :after and :before pseudo selectors. This is out of scope of this article though as my intention is to cover the basics to get you going.

在某些情況下，對于更高級的形狀，使用：after和：before偽選擇器也是一個好主意。這超出了本文的范圍，因為我的意圖是涵蓋使您入門的基礎知識。

壞處 (Disadvantage)

There is one big disadvantage with the above approach. For example, if you want your text to flow around and wrap your shape. A regular HTML div with background and borders to make up the shape won't allow that. The text will not adapt and flow around your shape. Instead it will flow around the div itself (which is a square or a rectangle).

上述方法有一個很大的缺點。 例如，如果您希望文本四處流動并包裹形狀。具有背景和邊框以構成形狀的常規HTML div不允許這樣做。文本將不會適應您的形狀，并且不會圍繞您的形狀流動。相反，它將圍繞div本身(是正方形或矩形)流動。

Below is an illustration showing the triangle and how the text will flow.

下圖顯示了三角形以及文本如何流動。

Luckily we have some modern CSS properties to use instead.

幸運的是，我們可以使用一些現代CSS屬性來代替。

CSS形狀-另一種方法 (CSS Shapes - The other way)

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.

如今，我們有一個名為shape-outside的屬性可在CSS中使用。此屬性使您可以定義文本將環繞/環繞的形狀。

Along with this property we have some basic shapes: inset()circle()ellipse()polygon()

除了這個屬性，我們還有一些基本形狀： 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.

提示：您還可以使用clip-path屬性。您可以用相同的方式創建形狀，但是不會像外部形狀那樣使文本環繞形狀。

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!

我們將要使用shape-outside屬性將形狀應用到的元素必須是浮動的。它還必須具有定義的寬度和高度。 要知道，這真的很重要！

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

您可以在此處詳細了解原因。以下也是我從提供的developer.mozilla.org鏈接中獲取的文本。

The shape-outside property is specified using the values from the list below, which define the float area for float elements. The float area determines the shape around which inline content (float elements) wrap.
使用以下列表中的值指定shape-outside屬性，該值定義了float元素的浮動區域。浮動區域確定內聯內容(浮動元素)環繞的形狀。

inset() (inset())

The inset() type can be used to create a rectangle/square with an optional offset for the wrapping text. It allows you to provide values on how much you want your wrapping text to overlap the shape.

inset()類型可用于創建一個矩形/正方形，并為包裝文本提供可選的偏移量。它使您可以提供所需的大小，以使換行文字與形狀重疊。

You can specify the offset to be the same for all four directions like this: inset(20px). Or it can be individually set for each direction: inset(20px 5px 30px 10px).

您可以將所有四個方向的偏移量指定為相同的： inset(20px)。 或者可以為每個方向分別設置： inset(20px 5px 30px 10px) 。

You can use other units also to set the offset, for example, percent. The values correspond like this: inset(top right bottom left).

您還可以使用其他單位來設置偏移量，例如百分比。這些值的對應關系如下： 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.

查看以下代碼示例。我已將插入值指定為頂部20px，右側5px，底部30px和左側10px。如果您希望文本圍繞正方形顯示，則可以完全跳過inset()。而是在div上設置背景并照常指定大小。

#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:

還可以給inset()一個第二個值，該值指定插圖的邊界半徑。如下所示：

#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.

在這個圖中，使用shape-outside屬性創建了一個圓。您還必須應用具有相應屬性的剪切路徑 ，才能顯示圓。

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.

clip-path屬性可以使用與shape-outside屬性相同的值，因此我們可以為其提供用于shape-outside的標準circle()形狀。另外，請注意，我在此處的元素上應用了20px的邊距，為文本提供了一些空間。

#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.

在上面的示例中，我沒有指定圓的半徑。這是因為我希望它與div一樣大(300px)。如果您想為圓指定不同的大小，則可以這樣做。

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.

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.

在下面的示例中，我將半徑設置為50％。然后，我將圓心偏移了30％。注意，在半徑和位置值之間必須使用單詞“ at”。

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).

橢圓的工作方式與圓形相同，只不過它們創建了一個橢圓。您可以定義X值和Y值，如下所示： 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.

多邊形是定義了不同頂點/坐標的形狀。在下面創建一個“ T”形，這是我名字中的第一個字母。我從0,0坐標開始，然后從左向右移動以創建“ T”形。

#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.

這是具有透明背景的.png圖像。

<img src="src/moon.png" id="moon" />

#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:

我叫Thomas Weibenfalk，是瑞典的一名開發商。我定期在我的YouTube頻道上創建免費教程。在React和Gatsby上還有一些高級課程。隨時通過以下鏈接訪問我：

Twitter — @weibenfalk,Weibenfalk on Youtube,Weibenfalk Courses Website.

Twitter — @ weibenfalk ，Weibenfalk在Youtube上，Weibenfalk 課程網站。