如何使用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 元素。这些元素可以通过起始标签、一些内容和闭合标签来定义。所以让我们逐一了解上面示例中使用的元素：

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

方法

使用 <header> 标签来创建一个头部。
为了在头部中添加内容，我们将使用一个 div。
然后我们将使用 clip-path() 函数来为头部赋予形状。

HTML 代码

创建一个 HTML 文件

在 head 部分使用 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”。
body包含一个头部，其中还包含具有类“main_box”的div标签。
Div包含标题“HELLO, WORLD!”和一个段落“如何使用HTML和CSS创建非矩形标题”。

CSS代码

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

恢复所有浏览器效果。
使用类和id来赋予HTML组件效果。
使用CSS clip-path()技术给头部赋予特定形状。

Style.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
并且给body设置了背景颜色为绿色。
给header设置了高度为65vh，背景颜色为黑色，然后使用了clip-path多边形，使header呈非矩形形状，然后给它设置了10em的边框半径。
然后给与div链接的class为main_box设置了position: absolute; top: 25%; left: 50%; text-align: center; transform: translate(- 50%, -50%);
标题的字体大小为3.85em，margin为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>