Search code examples
htmlcss

How can I achieve a curved effect at the bottom of my page without having to reset my gradient pattern?

I am trying to code my own copy of an example website for practice.

How my current page looks

The effect I want to add (rounded corners)

I just want .nav-and-main to end with a nice curve effect that blends back into the white of the page without having to re-apply the gradient (which makes it look poorly designed due to the sudden change in pattern).

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  list-style-type: none;
  text-decoration: none;
  font-family: Arial, Helvetica, sans-serif;
}

.nav-and-main {
  background: rgb(34, 195, 93);
  background: linear-gradient(50deg, rgba(34, 195, 93, 1) 0%, rgba(45, 75, 253, 1) 100%);
}

nav {
  display: flex;
  align-items: center;
  gap: 60px;
  height: 50px;
  padding: 0 20px;
  border-bottom: 1px solid rgb(255, 255, 255, 0.2);
}

.site-icon-name {
  display: flex;
  gap: 10px;
}

.site-icon {
  height: 18px;
  width: 18px;
  border: 2px solid black;
  border-radius: 5px;
  box-shadow: 5px 5px black;
}

.site-directory {
  display: flex;
  gap: 20px;
}

.site-directory li a {
  font-size: 12px;
  color: white;
  text-transform: uppercase;
  font-weight: bold;
}

.site-directory li a:hover {
  color: rgb(25, 41, 41);
}

.user-icon {
  height: 22px;
  width: 22px;
  background-color: white;
  border-radius: 50%;
  margin-left: auto;
}

form {
  position: relative;
}

.search-icon {
  position: absolute;
  top: 25%;
  left: 10px;
}

.search-bar {
  width: calc(100vw / 2);
  height: 50px;
  border-radius: 25px;
  border: none;
  padding-left: 35px;
}

.search-button {
  position: absolute;
  top: 15%;
  left: 375px;
  padding: 10px 20px;
  background: rgb(34, 195, 93);
  background: linear-gradient(50deg, rgba(34, 195, 93, 1) 0%, rgba(45, 75, 253, 1) 100%);
  border: none;
  border-radius: 25px;
  color: white;
  font-weight: bold;
}

.main {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  margin-top: 50px;
}

.main-headers {
  text-align: center;
}

.main-title {
  color: white;
  font-size: 36px;
  margin-bottom: 10px;
}

.main-subtitle {
  color: rgb(25, 41, 41);
  font-size: 16px;
}

.main-cards {
  display: flex;
  gap: 15px;
}

.main-card-1 {
  height: 275px;
  width: 250px;
  background-color: white;
  border-radius: 10px;
  padding: 15px;
}

.code-img {
  height: 100px;
  width: 100px;
}

.main-card-2 {
  height: 275px;
  width: 350px;
  background-image: url(./img/graph.jpg);
  border-radius: 10px;
  padding: 15px;
}

.curve {
  height: 50px;
  border-bottom-left-radius: 70px;
  border-bottom-right-radius: 70px;
}
<div class="nav-and-main">
  <nav>
    <div class="site-icon-name">
      <div class="site-icon"></div>
      <h1 class="site-name">Topic</h1>
    </div>

    <ul class="site-directory">
      <li><a href="#">home</a></li>
      <li><a href="#">browse topics</a></li>
      <li><a href="#">how it works</a></li>
      <li><a href="#">faqs</a></li>
      <li><a href="#">contact</a></li>
      <li><a href="#">pages</a></li>
    </ul>

    <img class="user-icon" src="./img/user-icon.png" alt="User Icon">
  </nav>

  <div class="main">
    <div class="main-headers">
      <h2 class="main-title">Discover. Learn. Enjoy</h2>
      <h3 class="main-subtitle">platform for creatives around the world</h3>
    </div>
    <form>
      <div class="search-icon">&#128269;</div>
      <input class="search-bar" type="text" placeholder="Design, Code, Marketing, Finance ...">
      <button class="search-button" type="submit">Search</button>
    </form>

    <div class="main-cards">
      <div class="main-card-1">
        <h4 class="card-title">Web Design</h4>
        <p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi iusto animi molestias temporibus cupiditate, labore quo architecto.</p>
        <img class="code-img" src="./img/code.jpg" alt="Coding Image">
      </div>
      <div class="main-card-2">
        <h4 class="card-title">Finance</h4>
        <p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione nihil quae alias quisquam consectetur, sequi asperiores dignissimos enim quidem accusantium laudantium obcaecati fugit culpa.</p>
      </div>
    </div>
  </div>
  <div class="curve"></div>
</div>

I have tried the following with the expectation of getting white corners:

  • Creating a div called .curve at the bottom of .nav-and-main with a height of 50px. I can make a border bottom right radius and border bottom left radius (which I can see if I change .curve background color to red) but it still includes the gradient in the corners rather than white corners. Setting background to white changes the entire .curve div not the corners.
  • Adding 2 divs within the .curve div, making them white squares, putting them on both corners and changing the z-index.
  • Adding padding to the bottom of .main and changing it's border radius instead of using .curve
  • Using div pseudo elements for .curve and changing the z-indexes
  • Using another container div around .nav-and-main to see if making the background color white will leave the corners of .curve white when the .nav-and-main gradient is applied on top.
  • Putting .curve in a container div and setting the container div background color to white
Solution

  • To achieve the desired effect, simply add the

    border-radius: 0 0 70px 70px;

    property to the .nav-and-main class.

    * {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  list-style-type: none;
  text-decoration: none;
  font-family: Arial, Helvetica, sans-serif;
}

.nav-and-main {
  border-radius: 0 0 70px 70px;
  background: rgb(34,195,93);
  background: linear-gradient(50deg, rgba(34,195,93,1) 0%, rgba(45,75,253,1) 100%);
}

nav {
  display: flex;
  align-items: center;
  gap: 60px;
  height: 50px;
  padding: 0 20px;
  border-bottom: 1px solid rgb(255, 255, 255, 0.2);
}

.site-icon-name {
  display: flex;
  gap: 10px;
}

.site-icon {
  height: 18px;
  width: 18px;
  border: 2px solid black;
  border-radius: 5px;
  box-shadow: 5px 5px black;
}

.site-directory {
  display: flex;
  gap: 20px;
}

.site-directory li a {
  font-size: 12px;
  color: white;
  text-transform: uppercase;
  font-weight: bold;
}

.site-directory li a:hover {
  color: rgb(25, 41, 41);
}

.user-icon {
  height: 22px;
  width: 22px;
  background-color: white;
  border-radius: 50%;
  margin-left: auto;
}

form {
  position: relative;
}

.search-icon {
  position: absolute;
  top: 25%;
  left: 10px;
}

.search-bar {
  width: calc(100vw / 2);
  height: 50px;
  border-radius: 25px;
  border: none;
  padding-left: 35px;
}

.search-button {
  position: absolute;
  top: 15%;
  left: 375px;
  padding: 10px 20px;
  background: rgb(34,195,93);
  background: linear-gradient(50deg, rgba(34,195,93,1) 0%, rgba(45,75,253,1) 100%);
  border: none;
  border-radius: 25px;
  color: white;
  font-weight: bold;
}

.main {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  margin-top: 50px;
}

.main-headers {
  text-align: center;
}

.main-title {
  color: white;
  font-size: 36px;
  margin-bottom: 10px;
}

.main-subtitle {
  color: rgb(25, 41, 41);
  font-size: 16px;
}

.main-cards {
  display: flex;
  gap: 15px;
}

.main-card-1 {
  height: 275px;
  width: 250px;
  background-color: white;
  border-radius: 10px;
  padding: 15px;
}

.code-img {
  height: 100px;
  width: 100px;
}

.main-card-2 {
  height: 275px;
  width: 350px;
  background-image: url(./img/graph.jpg);
  border-radius: 10px;
  padding: 15px;
}

.curve {
  height: 50px;
  border-bottom-left-radius: 70px;
  border-bottom-right-radius: 70px;
}
    <!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="./style.css">
    <title>Test Site</title>
  </head>
  <body>
    <div class="nav-and-main">
      <nav>
        <div class="site-icon-name">
          <div class="site-icon"></div>
          <h1 class="site-name">Topic</h1>
        </div>
    
        <ul class="site-directory">
          <li><a href="#">home</a></li>
          <li><a href="#">browse topics</a></li>
          <li><a href="#">how it works</a></li>
          <li><a href="#">faqs</a></li>
          <li><a href="#">contact</a></li>
          <li><a href="#">pages</a></li>
        </ul>
    
        <img class="user-icon" src="./img/user-icon.png" alt="User Icon">
      </nav>
  
      <div class="main">
        <div class="main-headers">
          <h2 class="main-title">Discover. Learn. Enjoy</h2>
          <h3 class="main-subtitle">platform for creatives around the world</h3>
        </div>
        <form>
          <div class="search-icon">&#128269;</div>
          <input class="search-bar" type="text" placeholder="Design, Code, Marketing, Finance ...">
          <button class="search-button" type="submit">Search</button>
        </form>
  
        <div class="main-cards">
          <div class="main-card-1">
            <h4 class="card-title">Web Design</h4>
            <p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi iusto animi molestias temporibus cupiditate, labore quo architecto.</p>
            <img class="code-img" src="./img/code.jpg" alt="Coding Image">
          </div>
          <div class="main-card-2">
            <h4 class="card-title">Finance</h4>
            <p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione nihil quae alias quisquam consectetur, sequi asperiores dignissimos enim quidem accusantium laudantium obcaecati fugit culpa.</p>
          </div>
        </div>
      </div> 
      <div class="curve"></div>
    </div>
  </body>
</html>