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

📅  最后修改于: 2021-09-02 04:59:55             🧑  作者: Mango

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

方法:

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

HTML代码:

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


  

    Document
    

  

    
        
            

Geeks For Geeks

            

A computer science portal for geeks

        
    
  


style.css
*{
    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;
}


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)代码组合起来,在浏览器上运行。

输出: