时间戳

首页 > 解决方案 > 用css为页眉和页脚创建对角线

html - 用css为页眉和页脚创建对角线

问题描述

我是 CSS 和样式的新手，我正在尝试使用 CSS 为我的 React.js Web 应用程序的页眉和页脚创建类似对角线的东西，但我不知道如何制作它。我尝试了一些解决方案，但它不能正常工作。我的网络应用程序完全适合移动设备。

这是我的 HTML 登录页面代码，我想将这些行添加到我的模板中：

 <div class="">
        <form>
            <input class="" type="text" name="mobileOrEmail" required /><br />
            <input class="" type="password" name="password" required /><br />
            <button type="submit">login</button> <br />
            <a href="/register">sign up</a> <br />
        </form>
 </div>

在此处输入图像描述

标签： htmlcss

解决方案

首先，您必须创建一个标签以应用一般样式，例如标题，然后在 div 中您已经输入了表单的所有数据。我给你一个简单的标题示例：

.open {
  background-color: #333;
  color: #eee;
  text-align: center;
}

.open::after {
  display: block;
  content: "";
  border-top: 100px solid #333;
  border-left: 100vw solid transparent;
  background-color: #fff;
}
  
.title {
  padding: 30px;
}
<header class="open">
  <div class="title">
    <h1>Your code</h1>
  </div>
</header>

推荐阅读