CSS六边形

251 阅读5分钟

"层叠样式表是一段代码,用于在超文本标记语言标签的工作中增加效果和额外功能。HTML代码是建立和发展网站的一个重要部分。而同样地,如果没有CSS,只使用HTML是不够的,这就导致了过度。HTML、CSS和javascript这三种基本工具结合在一起,服务于许多领域,包括静态网页和动态网站、应用程序等。此外,在用另一种编程语言,即C锐开发任何网站时,HTML和CSS也发挥着重要作用。简而言之,HTML创建对象,而CSS设计对象。这篇文章是关于在网页中设计一个多边形。

六边形是一种数学上的几何形状,称为有6条边的多边形。为了设计一个六边形,我们将使用HTML和CSS"。

CSS

CSS主要有三种类型。每种类型都取决于其声明的位置。一种是内联,写在HTML标签内。第二种是内部的,写在HTML标签的头部部分。而第三种是外部CSS,它是在HTML代码和HTML文件之外的另一个以css为扩展名的文件中声明的。在设计六角形时,我们将采用内部CSS。内部CSS的开头和结尾标签是。

工具

创建一个简单的静态网页所使用的基本工具是一个文本编辑器和任何浏览器。你可以使用任何文本编辑器,但在本文中,我们使用的是一个简单的Windows默认文本编辑器和Chrome浏览器。我们在编辑器中编写HTML代码或标签,并在浏览器中执行该文件。

前提条件

关于任何工具或任何软件,都没有一些先决条件。但用户必须对HTML标签有一定的了解,因为在建立和设计六边形时需要基础知识。HTML标签包含两个主要部分:标题和正文。

**

<头> </头>

**

而其他一些标签将在实施时用代码解释。

六角形的实施

为了实施,打开记事本并开始编写HTML代码。在标题部分,我们将标题名称作为一个六边形;这将出现在标签中。朝着内部CSS前进。在Style标签里面,我们建立了一个六角形类的解释。

在CSS中,主要是在内部和外部造型中,为了使代码简短和易于理解,我们使用了id和class。这里出现的问题是,这些类和ID是如何工作的。我们想要应用于任何对象的所有功能和效果都在类或ID的主体中提到。这些ID和类是通过在我们想应用任何效果的标签中使用它们的名字来访问的。所以在这里,我们在style标签中创建了一个六边形id。这个ID将在创建六角形时被应用。在六边形主体内,我们声明了一个绘制形状的位置;为此,我们使用了两个特征,一个是顶部,另一个是左侧。顶部 "决定了从顶部到形状的距离。而 "左 "决定了从左边界到形状的距离。它可以用百分比或任何其他单位来写。

顶部:20。

左边:10%。

边缘的边框被设置为自动。这样一来,形状的位置就全部设置好了。现在我们将给形状应用一种颜色。这将是背景色。我们选择了洋红色。

背景色:洋红色。

多边形六边形是通过有角或弯曲的点形成的。为了使这些点成为弧形,我们将添加一个边框半径的功能,使其成为平滑的弧形,而不是有粗糙的边缘。

border-radius: 10px。

这里的值是以像素为单位写的。现在我们将决定给形状、高度和宽度。这两个特征是创建和造型一个形状的基石。任何形状或任何文本都被建议写在或画在一个指定的框内。这个框有助于非常容易地取消对象的分配。所以我们在这里声明了一个边界框。

CSS | 伪元素/类属性

这个属性用于将形状的线条旋转60度,形成一个完美的六边形。CSS伪元素是一种造型类型,用于为元素的某一特定部分设置样式。例如,它为形状的第一行设置样式。所有这些内容都在形状的内容之前和之后应用。我们可以以这种方式应用任何特征。

内容和边界是伪属性的一些内置特征。所有其他的高度、宽度和颜色的特征都与我们在六边形的简单id描述中所描述的一样。

现在,所有上述特征被声明为两个部分,以应用于形成一个六边形。

.hexagon : before{
Transform : rotate(60deg);
}

类似的特征是针对六边形的剩余部分;所有的形状都是通过使用多边形的指定角度来创建的,每两条备选线之间形成60度。

样式和头部标签现在已经关闭。请确保你打开的所有标签都必须关闭,以使它们在代码中应用;否则,一些效果可能会丢失。现在开始进入正文部分。

在这里,我们使用了一个简单的文本标题来写一个行。这个样式是一个内联样式的例子。

我们给了文本一个对齐方式,使其显示在网页的左侧,并给了字体颜色为黑色。

在文本之后,我们将声明六角形的代码。DIV是一个像HTML中的表格一样的容器。那是用来在一个直线位置上包含对象的。在DIV主体内,声明CSS类和ID名称,以便在形状的DIV容器上应用所有功能。关闭所有打开的标签,即Div、body和Html。

我们将记事本中的文件以".html "为扩展名保存,以创建一个网页。这个文件被保存为 "sample.html"。所以通过使用这个扩展名,文件的图标将被设置为默认浏览器的图标。

当我们在浏览器中运行该文件时,它将显示一个网页,在页面的左侧有一个标题和一个六边形的形状。

结论

六角形图是通过使用嵌入层叠样式表的HTML而形成的。在开始时,我们谈到了HTML的基础知识。还解释了CSS的类型,以消除关于CSS类型的任何歧义。我们提到了两个基本工具,它们对于创建和执行HTML和CSS标签是必不可少的。六边形的例子是通过代码和使用方法来实现和逐行解释的。通过CSS伪元素属性解释了创建形状的一种独特方法。最后,我们展示了由于所定义的代码而形成的静态网页。

<>