Photoshop Question posted in
The official user guide can be found here.

Slightly arced footer with CSS – Photoshop

I have made a footer in Photoshop looking like this:

Slightly curved footer

As you can see, the footer here is slightly arced all the way across. I have tried doing something with border-radius, but that almost only targets the edge, which makes the arc more curved in the edges, and not even receiving the effect of a subtle arced footer as seen in the image.

Is there an easy CSS way to do this, or do I need some JavaScript or something to achieve this?

Tags:

5

Answers


  1. 0

    Use a pseudo element of the footer with border-radius to make the arch.

    I made them different colors here so you can see which element is which.

    body {
 margin: 0;
 max-height: 100vh;
 overflow: hidden;
}
footer {
  bottom: 0; left: 0; right: 0;
  position: absolute;
  background: brown;
  height: 10vh;
}
footer::before {
  content: '';
  background: red;
  width: 200%;
  position: absolute;
  left: 50%; 
  top: -100%;
  transform: translateX(-50%);
  height: 1000%;
  border-radius: 50%;
  z-index: -1;
}
    <footer></footer>
    Login or Signup to reply.
  2. 0

    Its not perfect, but here i’ve got a really really big circle that’s absolutely positioned with the overflow hidden so that you only see the top part of the arc.

    #container{
  background: grey;
  height:300px;
  width:500px;
  position:relative;
  overflow:hidden;
}

#arc{
  position: absolute;
  top:200px;
  left:-800px;
  width:2000px;
  height:2000px;
  border-radius:2000px;
  background:brown;
}
    <div id="container">
  <div id="arc">
  </div>
</div>

    https://jsfiddle.net/z9pq1026/

    Login or Signup to reply.
  3. 0

    You can actually use border-radius to do this without a pseudo element.

        .arc {
      width: 100%;
      height:500px;
      background: #000000;
      border-radius: 50% / 30px;
      border-bottom-right-radius: 0;
      border-bottom-left-radius: 0;
    }
    <div class="arc"></div>

    will work just fine. Make sure that when you use: 

    border-radius: 50% / 30px;

    the first property is always “50%” as this will ensure the arc meets in the middle. The second property (after the “/”) is the height of the arc measured from the middle to the edges

    Login or Signup to reply.
  4. 0

    The circle solution, but it’s responsive!

    footer {
  background: #ececec;
  height: 200px;
  width: 100%;
  position: relative;
  overflow: hidden;
}

.arc {
  position: absolute;
  top: 0px;
  right: calc(-80%);
  width: 300%;
  padding-top: 100%;
  border-radius: 100%;
  background: black;
}

<footer>
  <div class="arc">

  </div>
</footer>
    Login or Signup to reply.
  5. 0

    This solution uses a large width to get a more pleasant curve, but without the pseudo-element:

    footer {
       background-color: red;
       width: 200%;
       transform: translateX(-25%);
       height: 200px;
       border-radius: 50% 50% 0 0;
    }
    <div>
  <footer></footer>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search