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

htmlcssweb developmentfront end technology更新于 2025/1/13 22:04:17

超文本标记语言简称 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 文件链接到 head 部分，该文件将包含页眉所需的所有动画和样式。

然后，在 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 添加各种动画和效果。

恢复所有浏览器效果。
要为 HTML 组件添加效果，请使用类和 ID。
使用 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
对于主体部分，我们将其背景色设为绿色。
对于标题部分，我们将其高度设为 65vh，背景色设为黑色，然后我们使用 clip-path 多边形使标题部分的形状为非矩形，最后，我们将其边框半径设为 10em。
对于与 div 关联的类 main_box，我们为其赋予了以下属性:position: absolute; top: 25%; left: 50%; text-align: center; transform: transform(- 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>