CODEWITHSUNDEEP
htmlcssweb
Manolis P.
Manolis P.

Reputation: 325

Navigation Bar: How can implement it with CSS?

I have seen the following design on this facebook page.

enter image description here

I am not sure how the top corners are made, and i cannot imagine a way to implement this.

Can anyone provide an idea?

Thanks in advance.

Upvotes: 0

Views: 61

Answers (2)

Deniz Öztürk
Deniz Öztürk

Reputation: 147

Using mask spans can be a good solution.

.container {
  background-color: #242B40;
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 20px;
  display: flex;
  align-content: center;
  justify-content: center;
}
  
  .navbar {
      width: 80%;
      display: block;
      background: #fff;
      position: relative;
      height: 50px;
      border-radius: 0 0 30px 30px;
      }
   
   .left-mask {
    width: 42px;
        height:55px;
        background: #fff;
        display: block;
        position: absolute;
        top: -17px;
        left: -20px;
        transform: rotate(-32deg);}
      
 
 .left-mask:before {
          width: 45px;
          display: block;
          background: #242B40;
          height: 65px;
          border-radius: 0px 20px 0px 0px;
          margin-left: -34px;
          content: ' ';
        }
<div class="container">
  <div class="navbar">
      <span class="left-mask"></span>
  </div>
</div>

Upvotes: 4

khn Rzk
khn Rzk

Reputation: 1292

Simple example to get curve edges

.curve{
  background-color:black;
    width:100%;
    height:20px;
    border-bottom-left-radius:50% 50%;
    border-bottom-right-radius:50% 50%;
    background: #232323;
    box-shadow: 0px 4px 10px 0px rgba(0,0,0,0.36);
}

.box {
    width: 100%;
    height: 45px;
    background: #232323;
}
<div class="box"></div>
<div class="curve"></div>

Upvotes: 0

Related Questions