HTML 如何使用HTML和CSS创建一个非矩形的标题

超文本标记语言被称为HTML。它用于构建网页；它解释了一个网页是如何被组合起来的。它有几个组成部分。其中的组件指示浏览器如何呈现材料。

层叠样式表，或CSS，定义了HTML组件在各种印刷和数字媒体中的显示方式，包括显示器和其他印刷和数字形式。使用CSS可以节省大量的时间。它可以同时控制几个网页的设计。在这篇文章中，我们将学习如何使用HTML和CSS创建一个非矩形的标题。

基本的HTML文档

首先，我们来看看一个基本的HTML文档–

<!DOCTYPE html>
<html>
<head>
   <title>Page Title</title>
</head>
<body>
   <h1>My First Heading</h1>
   <p>My first paragraph.</p>
</body>
</html>

如果我们看一下上面的例子，我们会看到不同的术语，如DOCTYPE、HTML、head、body、h1和p，这些被称为HTML元素，这些元素可以由一个起始标签、一些内容和一个结束标签来定义，所以让我们逐一了解上面例子中使用的元素

<！DOCTYPE html> 这个元素定义了该文档是一个HTML5文档。
<html> 这个元素被称为HTML页面的根元素，或者我们可以说，一个完整的HTML文档是写在这个标签里的。
<head> 所有关于HTML页面的元信息都写在这个标签里。
<title>用于指定HTML页面的标题，它被写在浏览器标签上。
<body>被定义为HTML页面的主体，所有内容如标题、段落、图片、超链接、表格、列表等。
<h1>是用来写大标题的。
<p>用于定义一个段落。

方法

使用

header>标签来创建一个标题。

为了在标题中添加内容，我们将使用一个div。
然后，我们将使用clip-path()函数来给标题添加形状。

HTML代码

创建一个HTML文件

在标题部分使用link标签链接CSS文件，该文件将包含所有必要的动画和标题的样式。

然后在我们的HTML页面的body部分：

使用<header>来创建页眉
创建一个div并为其分配一个类。
在这个div中添加内容，可以是标题或段落。

HTML

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Document</title>
   <link rel="stylesheet" href="style.css" />
</head>
<body>
   <header>
      <div class="main_box">
         <h1>HELLO, WORLD!</h1>
         <p>How to create a Non-Rectangular Header using HTML & CSS</p>
      </div>
   </header>
 </body>
</html>

我们首先描述了HTML页面的类型。
在<html> </html>标签内，我们使用了<head>标签和<body>标签。
head标签包含页面的标题 “document “和一个指向CSS样式表的链接 “style.css”
主体包含一个标题，它还包含一个类别为 “main_box “的div标签。
Div包含标题 “HELLO, WORLD!”和一段 “如何使用HTML和CSS创建一个非矩形标题”。

CSS代码

在 “style.css “文件中，添加并使用了以下代码。为了使HTML页面对所有浏览者具有互动性，CSS被用来添加各种动画和效果。

带回所有的浏览器效果。
为了给HTML组件传授效果，要使用类和ID。
使用CSS的clip-path()技术，使标题具有某种形状。

样式.css

* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}
body {
   background-color: peachpuff;
}
header {
   height: 65vh;
   background-color: black;
   clip-path: polygon(
      0 0,
      100% 0,
      100% 50vh,
      80% 60vh,
      60% 50vh,
      40% 60vh,
      20% 50vh,
      0 60vh
   );
   border-radius: 10em;
}
.main_box {
   position: absolute;
   top: 25%;
   left: 50%;
   text-align: center;
   transform: translate(-50%, -50%);
}
h1 {
   font-size: 3.85em;
   margin: 0.25em;
   color: yellow;
}
p {
   font-size: 2em;
   color: blue;
}

在*里面，这是一个通用的选择器，我们应用margin为0，padding为0，而box-sizing为border-box。
对于正文，我们给它的背景色是绿色。
对于标题，我们给它的高度为65vh，背景色为黑色，然后我们使用了一个夹子路径的多边形，使标题的形状不是矩形的，之后，我们给它的边界半径为10em。
然后，对于main_box，它是一个链接到div的类，我们给了它位置：绝对；顶部：25%；左侧：50%；文本对齐：居中；变换：translate(-50%, -50%)。
该标题的字体大小为3.85em，边距为0.25，颜色为黄色。
最后，段落的样式是字体大小为2em，颜色为红色。

在结合了HTML和CSS的代码后，我们得到了如下的输出结果

例子

以下是上述的完整例子

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Document</title>
   <link rel="stylesheet" href="style.css" />
</head>
<style>
   * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
   }
   body {
      background-color: peachpuff;
   }
   header {
      height: 65vh;
      background-color: black;
      clip-path: polygon(0 0,
         100% 0,
         100% 50vh,
         80% 60vh,
         60% 50vh,
         40% 60vh,
         20% 50vh,
         0 60vh);
      border-radius: 10em;
   }
   .main_box {
      position: absolute;
      top: 25%;
      left: 50%;
      text-align: center;
      transform: translate(-50%, -50%);
   }
   h1 {
      font-size: 3.85em;
      margin: 0.25em;
      color: yellow;
   }
   p {
      font-size: 2em;
      color: blue;
   }
</style>
<body>
   <header>
      <div class="main_box">
         <h1>HELLO, WORLD!</h1>
         <p>How to create a Non-Rectangular Header using HTML & CSS</p>
      </div>
   </header>
</body>
</html>