1

I am new to CSS and styling and I'm trying to create something like a diagonal line for the header and footer of my React.js web app with CSS but I do not know how can I make it. I have tried some solution but it does not work properly. my web app is completely mobile-friendly.

here is my HTML login page code and I want to add these lines to my template:

 <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>

enter image description here

John
  • 93
  • 6

1 Answers1

0

First you have to create a label to apply a general style, for example header and then in the div you already enter all the data of your form. I give you a simple example for a header:

.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>
sirtz
  • 75
  • 2
  • 9