border-radius not solved my problem.

I need to make a circular background for a region within the page as in the image.

My 1st question: it should be only the top of the page, not the bottom, My 2nd question: how can I create such a circle?

here is my code template:

HTML

<div className={styles.landing__page__4}>
      <div className={styles.ellipsis__background} />
</div>

CSS:

.landing__page__4 {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-top: 60px;
  position: relative;
  .ellipsis__background {
    position: absolute;
    background: #19092e;
    box-shadow: 0px -5px 75px rgba(112, 0, 255, 0.82);
    border-radius: 50% 50% 0 0;
    height: 100%;
    width: 100%;
    // bottom: -50%;
  }

thank you..

CodePudding user response：

You can achieve this by drawing the entire circle and giving it a height of 200vh (or whatever twice the height of the .landing__page__4 container is). Then give the container an overflow of hidden:

body {
  margin: 0;
}

.landing__page__4 {
  background: #19092e;
  position: relative;
  height: 100vh;
  overflow: hidden;
}

.ellipsis__background {
  box-shadow: 0px -5px 75px rgba(112, 0, 255, 0.82);
  border-radius: 50%;
  height: 200vh;
  margin-top: 46px;
}

<div >
  <div ></div>
</div>

CodePudding user response：

If you're trying to keep the circle in the upper part of the screen, while also respecting your 60px top margin, you could constrain the circle's height to half of the viewport height (50vh) and add an aspect-ratio of 1 to ensure it remains a perfect circle at any viewport height.

.landing__page__4 {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-top: 60px;
  position: relative;
}

 .ellipsis__background {
    position: absolute;
    background: #19092e;
    box-shadow: 0px -5px 75px rgba(112, 0, 255, 0.82);
    border-radius: 100%;
    height: 50vh;
    left: 50%;
    transform: translateX(-50%);
    aspect-ratio: 1;
  }

<div >
  <div >
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium possimus deleniti incidunt provident quo maiores fugiat, ullam reprehenderit quasi alias expedita pariatur accusamus, atque delectus, eum dolores. Fugiat, voluptate, hic.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium possimus deleniti incidunt provident quo maiores fugiat, ullam reprehenderit quasi alias expedita pariatur accusamus, atque delectus, eum dolores. Fugiat, voluptate, hic.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium possimus deleniti incidunt provident quo maiores fugiat, ullam reprehenderit quasi alias expedita pariatur accusamus, atque delectus, eum dolores. Fugiat, voluptate, hic.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium possimus deleniti incidunt provident quo maiores fugiat, ullam reprehenderit quasi alias expedita pariatur accusamus, atque delectus, eum dolores. Fugiat, voluptate, hic.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium possimus deleniti incidunt provident quo maiores fugiat, ullam reprehenderit quasi alias expedita pariatur accusamus, atque delectus, eum dolores. Fugiat, voluptate, hic.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium possimus deleniti incidunt provident quo maiores fugiat, ullam reprehenderit quasi alias expedita pariatur accusamus, atque delectus, eum dolores. Fugiat, voluptate, hic.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium possimus deleniti incidunt provident quo maiores fugiat, ullam reprehenderit quasi alias expedita pariatur accusamus, atque delectus, eum dolores. Fugiat, voluptate, hic.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium possimus deleniti incidunt provident quo maiores fugiat, ullam reprehenderit quasi alias expedita pariatur accusamus, atque delectus, eum dolores. Fugiat, voluptate, hic.</p>    
  </div>
  <div ></div>
</div>

jsFiddle

CodePudding user response：

If you want to crop the bottom half from your ellipse then use clip path. To make it appear as a background use z-index of -1. To ensure it remains as a circle use aspect-ratio:1/1.

See example

body {
  background-color: #19092e;
  color: white;
}
.ellipsis__container {
position:absolute;
width:100%;
height:100vh;
overflow:hidden;
z-index:-1;
}
.ellipsis__background {
  background: #19092e;
  box-shadow: 0px -5px 75px rgba(112, 0, 255, 0.82);
  border-radius: 50% 50% 0 0;
  width: 100%;
  aspect-ratio: 1/1;
  clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);
}

<div class='ellipsis__container'>
  <div ></div>
</div>
Blah blah blah