CODEWITHSUNDEEP
htmlcss
phasco phaisco
phasco phaisco

Reputation: 17

Make the top and bottom borders curved and dropshadow at the bottom?

I'm trying to create something like this:

enter image description here

My code is like this which only curves the bottom border and I cannot put any content in it and it hasn't got any bottom dropshadow either:

.curvedbox {
    position:fixed;
    top:0; left:0;
    width:100%;
    background:none;
    height:10%;
    padding-bottom:20%;
    overflow:hidden;
    z-index:1;
}
.curvedbox:after {
    content:'';
    position:absolute;
    left:-600%;
    width:1300%;
    padding-bottom:2300%;
    top:80%;
    background:none;
    border-radius:50%;
    box-shadow: 0px 0px 0px 9999px #526375;
    z-index:-1;
<div class="curvedbox"></div>

Could someone please advice on this?

Thanks in advance.

Upvotes: 1

Views: 62

Answers (2)

UncaughtTypeError
UncaughtTypeError

Reputation: 8752

Consider separating the content into three parts:

  1. Part 1: element for the upper or outer curve
  2. Part 2: an element to specifically contain any content
  3. Part 3: an element for the lower or inner curve (which we'll declare an inset box-shadow property to)

Nest these parts within a containing element, as demonstrated with the code snippet embedded below.

Code Snippet Demonstration:

* {
  box-sizing: border-box;
  font-family: arial;
}

.containing-curves {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  max-width: 300px;
  background: none;
  overflow: hidden;
}

.inner-curve {
  height: 50px;
  border-top-left-radius: 100%;
  border-top-right-radius: 100%;
  background: #d2d2d2;
  position: absolute;
  left: 0;
  right: 0;
  bottom: -25px;
  box-shadow: inset 1px 1px 5px 3px #505050;
}

.inner-content {
  display: flex;
  justify-content: space-evenly;
  height: 100%;
  align-items: center;
  background: gray;
  position: relative;
  margin-top: 25px;
  padding-bottom: 25px;
}

.outer-curve {
  height: 50px;
  border-top-left-radius: 100%;
  border-top-right-radius: 100%;
  background: #808080;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

.inner-content span {
  width: 100%;
  text-align: center;
}
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">

<div class="containing-curves">
  <div class="outer-curve"></div>
  <div class="inner-content">
    <span><i class="fa fa-cloud"></i></span>
    <span>text</span>
    <span><small>text</small><br><small>text</small></span>
  </div>
  <div class="inner-curve"></div>
</div>

Upvotes: 1

Tejasvi Karne
Tejasvi Karne

Reputation: 648

If you are open to a different way of doing it...

.curvedbox {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    background:none;
    height:10%;
    padding-bottom:20%;
    overflow:hidden;
    z-index:1;
}
.curvedbox:before, .curvedbox:after{
  content:'';
  position:absolute;
  top:0;
  left:50%;
  transform:translateX(-50%);
  width:1200%;
  height:0;
  padding-bottom:1300%;
  border-radius:50%;
}
.curvedbox:before {
background-color:#526375;
}
.curvedbox:after {
  top:90%;
  background-color:white;
}
<div class="curvedbox"></div>

It's hacky and the top value of .curvedbox:after might need to be changed depending on your needs.

Upvotes: 1

Related Questions