I am looking to incorporate a rounds div into the backdrop

My attempt to use border-radius did not solve my issue.

I am trying to create a circular background for a specific section of the page, as shown in the image.

For my first inquiry: I only want the circular background at the top of the page, not the bottom.

Secondly, how can I achieve this circular shape?

Below is the code template I am currently using:

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 for your help.

https://i.sstatic.net/xru3l.png

htmlcsssass

Answer №1

To achieve this effect, you can draw a complete circle and set its height to 200vh (or double the height of the .landing__page__4 container). Then, apply an overflow hidden property to the container:

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 class="landing__page__4">
  <div class="ellipsis__background"></div>
</div>

Answer №2

To ensure the circle stays in the upper part of the screen and respects a top margin of `60px`, you can set the circle's height to half of the viewport height (`50vh`) and add an `aspect-ratio` of `1` to maintain a perfect circle shape 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 class="landing__page__4">
  <div class="content">
    <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 class="ellipsis__background"></div>
</div>

jsFiddle

Answer №3

To trim the lower half of your ellipse, utilize clip path. For a background effect, set the z-index to -1. To maintain a circular shape, use aspect-ratio:1/1.

Take a look at the example below:

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 class="ellipsis__background"></div>
</div>
Blah blah blah

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What are some ways I can decrease the background width and shrink the div width?

I am hoping to maintain the current box size and borders, but I want to add a touch of color. Specifically, I would like to have a red line running through the center of the box without coloring the entire background. Although I know one way to achieve thi ...

cssreactjssassjsx

Focusing on the initial element of every line within a flex container that spans multiple lines

Looking for a solution to style the first item on each line of a multiline flexbox container with display: flex; flex-wrap: wrap. Preferably seeking a CSS-only approach rather than Javascript iteration. It's uncertain how many items there will be or t ...

cssflexbox

Ways to eliminate the blue selection box when dragging canvas objects in fabric framework

I've been trying to find a solution to remove the annoying blue highlight box that appears when dragging on the canvas while using fabric js, but so far I haven't had any luck. I've tried the following code, but it only works for text and n ...

javascriptjqueryhtmlcssfabricjs

One solitary table is successfully loaded

I am facing an issue with my setup where I have two HTML tables and a PHP file that loads every 1 second through AJAX to pass information to these tables. Here is the HTML structure: <div style='float: left;'> <br><br> & ...

javascriptphphtmlajax

Placing the checkbox label within a fieldset for proper alignment

When creating a registration form, I decided to use the fieldset element to organize the input fields into two rows. Now, I am faced with the challenge of adding a checkbox below them. While I could simply use a div for this purpose, I prefer to incorpora ...

htmlcssformscheckboxfieldset

JQuery integration resulting in disappearance of Input-group-btn element

Allow me to explain my current project. I am in the process of developing a Modal that enables users to input a password There will be an option to toggle between showing or hiding the text in the password field using a button positioned on the right sid ...

javascriptjqueryhtmlcsstwitter-bootstrap-3

Achieving automatic checkbox selection in Angular 6 through passing a value from one component to another

My page named second.html contains the following code: <div class="col-lg-4 col-md-4 col-sm-4"> <input type="checkbox" class="checkmark" name="nond" [checked]="r=='true'" (change)="nond($event, check)"> ...

htmlangularcheckboxangular6

Looking for a way to manipulate the items in my cart by adding, removing, increasing quantity, and adjusting prices accordingly. Created by Telmo

I am currently working on enhancing telmo sampiao's shopping cart series code by adding functionality for removing items and implementing increment/decrement buttons, all while incorporating local storage to store the data. function displayCart(){ ...

javascripthtmlshopping-cart

Ways to remove the default classes added by ngbootstrap

My current challenge involves utilizing ngbootstrap for popovers, yet desiring to override its default styling. Specifically, I have a form that should function as a popover triggered by a button click, and it needs to maintain its own distinct styles. Up ...

cssangularng-bootstrap

What's the best way to add line numbers to source code on an HTML webpage after parsing?

I am currently working with AngularJS and MongoDB. In my MongoDB data, there are some text elements that contain a \n, causing each line to be displayed on a new line based on the occurrence of \n. However, I also want to add line numbers to each ...

javascripthtmlcssangularjs

Creating tables in HTML is a useful skill to have. Follow these steps

I am looking to create a simple HTML table, and I have provided my code below: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content=" ...

htmlhtml-table

Help needed with using Regex to restrict the number of alphabetical characters allowed

Struggling with configuring RegEx's. Seeking guidance to create a RegEx with the following criteria: Only allow numbers (0-9) Allow a period (.), negative sign (-), plus sign (+), dollar sign ($), and comma (,) Do not permit any alphabetic characte ...

javascripthtmlregexvisual-studio

Insert a new row into a table using tablesorter jQuery

Is it possible to add a row to a table built with the jQuery library "Tablesorter" by simply clicking on a button? I have tried this approach, but unfortunately, the new row does not inherit the CSS properties of Tablesorter. As a result, I am unable to se ...

jquerycssrowtablesorter

When I hover over my images, they begin to flash before my eyes

My layout is set up so that when I hover over the printer image, it should switch to another image. However, instead of smoothly transitioning, the image starts to flash. This issue occurs in all browsers, indicating that I have made a mistake somewhere. ...

htmlcss

Need help positioning this HTML iframe on my webpage?

Can anyone help me figure out how to position this HTML i-frame in a specific place on my webpage? <div style="overflow: hidden; width: 333px; height: 156px; position src="h: relative;" id="i_div"><iframe name="i_frame"http://url.com/click.php?a ...

htmlcss

Display loader while waiting for file to be loaded

I am utilizing ajax to retrieve a file. The loading animation is functioning properly with the ajax request, however, the file size is notably large. I am interested in implementing a preloader that will display until the file has finished loading. ...

javascriptjqueryarraysajaxcss

Prevent a <span> element from affecting the linking functionality of an <a> tag

Is it possible to make a hyperlink clickable without including the <span> tags within it and instead attaching a jQuery event to those tags? This is the code I'm using. It utilizes bootstrap's list-group for a navigation element: <ul cl ...

javascripthtmlhyperlink

Remove HTML element and launch in a separate browser tab while preserving styles

I am currently working on developing a single-page application with Polymer3 (Javascript ES6 with imports). One of the key functionalities of my application involves moving widgets to new browser windows, allowing users to spread them across multiple scree ...

javascripthtmlwebecmascript-6polymer

Tips for ensuring v-tabs-items and v-tab-item fill height

I found an example that I am trying to follow at the following link: https://vuetifyjs.com/en/components/tabs#content <v-tabs-items v-model="model"> <v-tab-item v-for="i in 3" :key="i" :value="`tab-${i}`" > < ...

cssvue.jsvuetify.js

Utilize tag helpers to choose an option within a select element

I am facing a challenge in my ASP.NET Core application where I need to create a specific HTML structure in a Razor view based on a model instance. The HTML code I need to generate is a dropdown list with multiple options, each having custom attributes like ...

c#htmlasp.net-corerazortag-helpers