Create a small circle in the bottom left corner with a constrained size

I'm trying to create a circle at the top of the screen on mobile, similar to the image below.

The circle should take up a percentage of space, with the rest of the content appearing against a blue background as shown in the image. However, I'm having trouble getting the circle just right.

How can I adjust the size and position of the circle to achieve the desired effect?

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

.semi-circle {    
    aspect-ratio: 1/1; /* Maintains a 1:1 aspect ratio for equal height and width */
    background: #3D4A6D;
    border-radius: 0 80% 80% 0;
    box-shadow: inset -3.5rem 1px 0 #364363, 
                    3.5rem 1px 0 #26324C;
}
<div class="semi-circle">
</div>

Thank you in advance for any help provided, and apologies for what may seem like a trivial question.

javascripthtmlcssvue.jsvuetify.js

Answer №1

It seems like you might find the vmin unit useful for achieving your goal:

.semi-circle {
  --shadow-size: 4vmin;
  aspect-ratio: 1;
  background: #3D4A6D;
  border-radius: 50%;
  box-shadow:
    var(--shadow-size) var(--shadow-size) 0 var(--shadow-size) #364363,
    calc(2 * var(--shadow-size)) calc(2 * var(--shadow-size)) 0 calc(2 * var(--shadow-size)) #26324C
  ;
  width: 90vmin;
  position: absolute;
  bottom: 100%;
  right: 100%;
  transform: translate(75%,75%); 
}
<div class="semi-circle"></div>

Answer №2

Have you considered trying this approach? I've implemented the use of the position property and defined the left and top values as negative numbers.

.half-moon {    
aspect-ratio: 1/1;
background: #637B52;
border-radius: 80% 80% 80% 80%;
box-shadow: inset -3.5rem 1px 0 #576A45, 3.5rem 1px 0 #495935;
width: 90%;
position: absolute;
top: -100px;
left: -100px;       
}

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

Achieving Text Wrapping Around Unconventional Shapes Using CSS

I'm currently facing a challenge in getting text to wrap around an irregular shape on a web page. Despite numerous attempts, I have yet to find a solution that meets my requirements. Attached is an image illustrating the layout I am aiming for. The ...

htmlcssimage

I possess multiple checkboxes that appear as described below. I am looking to modify the nested value highlighted in the blue circle in the image

I need to make a change in this area of my state: view screenshot The specific portion highlighted in the circle is what I want to modify **Here is my checkbox input code:** {this.state.data.map((elm) => ( <div className={classes.rowContainer}&g ...

javascriptreactjsreact-reduxmaterial-ui

If the condition is not satisfied, decrease the number of loop iterations

There is a code snippet below: for (var i = 0; i < data.status.length; i++) { if(data.status[i].isMode == 0) { var row = '<tr><td>' + data.status[i].Name + '</td><td>' + data.status[i].Pay + &apos ...

javascriptjquery

Laravel Mix causing issues with Vue loading when extract() is used

I currently have a simple webpack.mix.js and resources/js/app.js setup in my Laravel project. Here is the code from webpack.mix.js: const mix = require('laravel-mix'); mix.js('resources/js/app.js', 'public/js') .sass(&ap ...

vue.jswebpacklaravel-mix

The Angular controller that has been injected into the app is not defined

In an effort to enhance my simple Angular app, I decided to modularize it. I separated the controller into its own file within a dedicated directory. By employing dependency injection, I ensured the controller's availability in the app module. Combini ...

javascriptangularjs

JavaScript Object Featuring a Default Function Along with Additional Functions

I'm currently working on developing a custom plugin, but I've hit a roadblock at the initial stage. My goal is to create an object that can accept a parameter as its default and also include other functions within it. Below is an example of what ...

javascript

Using the attribute to pass an object to a directive and including a variable inside

Is it possible to transfer $scope.data to a directive through its attribute in an Object, without using separate attributes? I would like to achieve the below format with any solution. <custom-directive detail="{index:1, data: {{data}}}"> </custo ...

javascriptangularjsangularjs-directive

End the response after sending with res.send() within the module

I am in the process of developing a module for validating requests that come through req.body. Instead of repeating the same code snippet in every server request, I aim to consolidate it into a single line within a module. const errors = validationResult( ...

javascriptnode.jsexpressmoduleexpress-validator

jQuery Mobile - Implementing Persistent Toolbars along with a custom back button functionality

UPDATE Here is a fiddle of the problem: https://jsfiddle.net/9k449qs2/ - attempt to select the header using your picker, but every time you click it will select the whole page instead. I am currently working on a project that includes a persistent header ...

htmlcsscordovajquery-mobilesingle-page-application

How can I show information on the same page as a link by simply clicking on it?

My goal is to create a functionality where clicking on a link will display specific information. Currently, all the links and their corresponding information are displayed at once. I want to change this so that the links are displayed first, and the inform ...

javascriptjqueryhtml

Failed to decipher an ID token from firebase

I'm feeling extremely frustrated and in need of assistance. My goal is to authenticate a user using Google authentication so they can log in or sign up. Everything worked perfectly during development on localhost, but once I hosted my app, it stopped ...

javascripttypescriptfirebasefirebase-authentication

Instructions for creating a slush machine

Today, I tried to create a slush generator but ran into some issues. Even after following tutorials online and double-checking my work, the generator doesn't seem to be functioning properly. If anyone can identify what I might have done wrong, please ...

javascriptnode.jsnpmgulp

What is the best way to highlight selected navigation links?

Recently, I implemented a fixed navigation bar with relevant links on a website. The navbar includes a jquery script for smooth scrolling when clicked. However, I am struggling to add a selected class to the clicked link. Despite trying various solutions f ...

javascriptjquery

Vue custom headers not successfully added in request

While making a request using Axios, I encountered an issue when trying to add custom headers as required by the API. When including the custom headers, the response received is: CORS policy: Response to preflight request doesn't pass access control c ...

vue.jsrequestfetch

Can you please elaborate on the concept of type coercion in JavaScript?

I've come across information stating that when comparing an object with a number, type-coercion occurs. ToPrimitive is called on the object which then invokes valueOf and, if necessary, toString. However, I'm struggling to understand how this pro ...

javascripttype-coercion

What is the best way to assign a unique background color to each individual card in my card list?

I have a list of cards and I want to assign a unique color to each card in the list. I attempted to do this on my own, but it ended up being more complex than I anticipated. Here is the list of cards: return ( <Container> <Row className=&qu ...

javascriptreactjs

The v-for directive is unable to access the prop data

<template> <span> <i class="fa fa-star text-warning fa-2x" v-for="r in rating" :key="r"></i> <h1>{{rating}}</h1> </span> </template> <script> ...

twitter-bootstrapvue.jsfont-awesomevuejs3

Show the item in the menu with a label that has either subscript or superscript styling

Within the realm of electrons, the application menu is specified: const menuTemplate = [ { label:"Menu Item 1", click(){ //define some behavior } } ]; Is there a method to exhibit the name of the menu item as Me ...

javascriptnode.jsunicodeelectron

Unable to locate webpack module

When I try to run the command npm run start, I encounter an error message: The webpack configuration is as follows: "name": "frokify", "version": "1.0.0", "description": "frokify project", ...

javascriptnode.jsnpmwebpack

What is the best way to connect tags with their corresponding tag synonyms?

I'm currently developing a system where users can link tags to posts, similar to how it's done on SO. I'm facing some challenges when it comes to implementing tag synonyms. Let's take a look at the Tags table: | TagName | |-------- ...

javascriptmysqlsqlnode.jsnode-mysql