Question 196962 in CSS Question posted in
Some basic documentation can be found here.

How to curve the outside of a rectangle in CSS?

I have a website which uses a SAAS CMS, so I cannot change the HTML structure, but I do have the ability to add some custom css. I want the header and footer to have upward and downward curves. Can this be achieved in CSS alone? I have tried using border-radius but it seems only good for perfect circles, not obscure shapes.

I made a codeply for it here.

Using Bootstrap, here’s my HTML:

.navbar-top {
  background-color: blue;
}

.navbar-bottom {
  background-color: red;
}
<!-- bootstrap nav -->
<nav class="navbar navbar-top navbar-expand-md">
  <a class="navbar-brand" href="#">Brand</a>
  <ul class="navbar-nav">
    <li class="nav-item"><a href="#" class="nav-link">Home</a></li>
    <li class="nav-item"><a href="#" class="nav-link">Link</a></li>
    <li class="nav-item"><a href="#" class="nav-link">Link</a></li>
    <li class="nav-item"><a href="#" class="nav-link">More</a></li>
    <li class="nav-item"><a href="#" class="nav-link">Options</a></li>
  </ul>
</nav>
<div class="container">
  <div class="main-content">
    <p>main elements are here</p>
    <!-- main elements go here-->
  </div>
</div>
<!-- /bootstrap nav -->
<nav class="navbar navbar-bottom navbar-expand-md fixed-bottom">
  <a class="navbar-brand" href="#">Brand</a>
  <ul class="navbar-nav">
    <li class="nav-item"><a href="#" class="nav-link">Home</a></li>
    <li class="nav-item"><a href="#" class="nav-link">Link</a></li>
    <li class="nav-item"><a href="#" class="nav-link">Link</a></li>
    <li class="nav-item"><a href="#" class="nav-link">More</a></li>
    <li class="nav-item"><a href="#" class="nav-link">Options</a></li>
  </ul>
</nav>

enter image description here

Tags:

2

Answers


  1. 0

    To curve the outside of a rectangle in CSS, you can use the border-radius property. The border-radius property allows you to set rounded corners for an element, thereby curving the outer edges of the rectangle.

    Login or Signup to reply.
  2. 0

    To achieve this, try using this code:

    .navbar {
  justify-content: flex-start;
}

.navbar-nav {
  flex-direction: row !important;
}

.navbar-top {
  background-color: blue;
}

.navbar-bottom {
  background-color: red;
}

.main {
  border-top-left-radius: 10%;
  border-bottom-right-radius: 10%;
  background: #fff;
  position: relative;
  min-height: calc(100vh - 112px);
  padding: 20px;
}

.main:before {
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  background-color: blue;
  width: 100%;
  height: 50%;
  z-index: -1;
}

.main:after {
  position: absolute;
  content: '';
  bottom: 0;
  right: 0;
  background-color: red;
  width: 100%;
  height: 50%;
  z-index: -1;
}
    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet" />
<!-- bootstrap nav -->
<nav class="navbar navbar-top navbar-expand-md">
  <a class="navbar-brand" href="#">Brand</a>
  <ul class="navbar-nav">
    <li class="nav-item"><a href="#" class="nav-link">Home</a></li>
    <li class="nav-item"><a href="#" class="nav-link">Link</a></li>
    <li class="nav-item"><a href="#" class="nav-link">Link</a></li>
    <li class="nav-item"><a href="#" class="nav-link">More</a></li>
    <li class="nav-item"><a href="#" class="nav-link">Options</a></li>
  </ul>
</nav>
<main class="main">
  <div class="container">
    <div class="main-content">
      <p>main elements are here</p>
      <!-- main elements go here-->
    </div>
  </div>
</main>
<!-- /bootstrap nav -->
<nav class="navbar navbar-bottom navbar-expand-md fixed-bottom">
  <a class="navbar-brand" href="#">Brand</a>
  <ul class="navbar-nav">
    <li class="nav-item"><a href="#" class="nav-link">Home</a></li>
    <li class="nav-item"><a href="#" class="nav-link">Link</a></li>
    <li class="nav-item"><a href="#" class="nav-link">Link</a></li>
    <li class="nav-item"><a href="#" class="nav-link">More</a></li>
    <li class="nav-item"><a href="#" class="nav-link">Options</a></li>
  </ul>
</nav>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search