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 课程网站。