css创建三角形原理

Introduction:

介绍：

We can do so much in web development that it makes everything just simply interesting. You can style your websites or web pages in any way you want. You can add animations to your websites or web pages and lots more. The thing is that styling is very important for web development as it completes your website or web page entirely. In case you have not styled your website or web page properly then nobody would like to have a look at your website or web page and all of your efforts and hard work will go in vain. So, practice styling your website or web page as much as you can. You can try different types of templates or layouts and there is much more, all you need to do is explore.

我们可以在Web开发中做很多事情，以至于使所有事情变得简单有趣。 您可以根据需要以任何方式设置网站或网页的样式。 您可以将动画添加到您的网站或网页等。 问题是样式对于Web开发非常重要，因为它可以完全完成您的网站或网页。 如果您没有正确设置网站或网页的样式，那么没有人希望浏览您的网站或网页，那么您的所有努力和辛苦工作将白费。 因此，请尽可能多地设计网站或网页的样式。 您可以尝试使用不同类型的模板或布局，而要做的更多工作就是探索。

Shapes:

形状：

Since the talk is all about styling, why don't we take this discussion a bit further and talk about shapes in CSS? You read that right, with the help of CSS we can make as many shapes as we want. From triangle to square to a rectangle and many more. All you need to do is set the size and shape with precise measurements and you will be able to create various shapes just by making use of CSS.

既然所有讨论都与样式有关，那么为什么不进一步讨论CSS中的形状呢？ 您没看错，在CSS的帮助下，我们可以制作任意数量的形状。 从三角形到正方形再到矩形等等。 您需要做的就是通过精确的测量来设置大小和形状，仅通过使用CSS就可以创建各种形状。

In this article, we will learn about one particular shape that is a triangle. We will learn how we can create triangles with the help of CSS? So, keep on reading because things are about to get interesting.

在本文中，我们将学习一种特殊的形状，即三角形 。 我们将学习如何在CSS的帮助下创建三角形 ？ 因此，请继续阅读，因为事情将变得有趣。

Method:

方法：

Creating a triangle using CSS is not very easy as it sounds. There is a very neat trick to do that. The basic idea behind creating a triangle is that first imagine a transparent box with borders on all sides. Now imagine that the borders are meeting each other on either end. Now what you need to do is set the width and height of this box as 0 and make the right border, left border and the bottom border is transparent. After doing this, all that would be visible in the top border in the shape of a triangle and there you go, that is how you create a triangle?

听起来很不容易，但是使用CSS创建三角形 。 有一个非常巧妙的技巧可以做到这一点。 创建三角形背后的基本思想是，首先想象一个透明的盒子，在所有侧面都带有边框。 现在想象一下边界在两端彼此相遇。 现在，您需要将此框的宽度和高度设置为0，并使右边界，左边界和底边界透明。 完成此操作之后，所有将在顶部边框中以三角形形状显示的内容就可以创建三角形了 ？

Well, yes it might sound confusing at first but with the help of an example, you will be able to do it in no time. So go ahead and try it out yourselves and whenever you find yourself in doubts, you can always come back to the article.

好吧，是的，乍一看可能让人感到困惑，但是借助示例，您将可以立即进行操作。 因此，请自己尝试一下，一旦发现自己有疑问，就可以随时返回本文。

Syntax:

句法：

Element {
       width: 0;    height: 0;    border-left: value px solid transparent;    border-right: value px solid transparent;    border-bottom: value px solid color;}

Example:

例：

Output

输出量

In the above example, change the values of the borders and resize your triangle.

在上面的示例中，更改边框的值并调整三角形的大小。

翻译自:

css创建三角形原理