0

I want to make invert header in Ionic , I have for the moment make like this Now

But I want to make a inverted border radius like this: Result I want

There is the actual css :

.holder {
  position: relative;
  width: 100%;
  display: flex;
  height: 35vh;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  overflow: hidden;
}

.holder:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: #DC9265;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #ECBC67, #F5C267);
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #e9b081, #D58564);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  border-radius: 0 0 50% 50%/0 0 100% 100%;
  transform: scaleX(1.5);
}

Thanks

Alexander Nied
  • 12,804
  • 4
  • 25
  • 45
ertyuiooz
  • 1
  • 1

1 Answers1

0

you should change the border-radius to

border-radius: 85% 85% 0 0/450px 450px 0 0;
  • This change the border radius of the top – ertyuiooz Dec 10 '21 at 22:27
  • Ok I have another solution but its only clean on mobile maybe someone else can do it better but try this `background-image: radial-gradient(circle at 50% 100%, rgba(255, 0, 0, 0) 200px, rgb(0, 0, 0) 100px);` instead of the border Radius –  Dec 10 '21 at 22:58