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

在本文中，我们将使用 HTML 和 CSS 的基础知识创建一个非矩形标题。

方法：

• 使用
  标签创建标题。
• 创建一个div以添加标题的内容。
• 使用 clip-path()函数为标题提供特定形状。

HTML代码：

• 创建一个 HTML 文件 (index.html)。
• 链接在 HTML 上提供所有动画效果的 CSS 文件。 CSS 文件链接在网页的头部部分内。
• 来到我们 HTML 代码的正文部分。
  • 创建标题标记。
  • 创建一个div标签并将类分配给它。
  • 向该特定div添加标题和段落。

HTML

  

    
    

  

    

        

            
Geeks For Geeks
            
A computer science portal for geeks
        
    

  

CSS 代码：以下代码添加在“ style.css”文件中并用于 HTML 代码。 CSS 用于为 HTML 页面提供不同类型的动画和效果，以便它与所有用户交互。

• 恢复所有浏览器效果。
• 使用类和 id 为 HTML 元素赋予效果。
• 使用 CSS clip-path()函数为标题提供特定的形状。

样式文件

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
  
body{
    background-color: #000;
}
  
header{
    height: 65vh;
    background-color: rgb(37, 142, 8);
    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;
}
  
p{
    font-size: 2em;
}

将以上两段(HTML 和 CSS)代码组合起来，在浏览器上运行。

输出：