Question 237948 in Html Question posted in
Some basic documentation can be found here.

Html – Draw a circle at the corner left with limited size

I want to draw a circle, just on the top of the screen like the image bellow

Its for mobile. The circle occupies a percentage of space, the rest of the content when scrolling will be the background blue as the image says

Im stuck with the circle.

How can I fix it to put him where I need it and put a smaller size to it?

enter image description here

.semi-circle {    
    aspect-ratio: 1/1; /* 1:1 aspect-ratio, so the height we specified in the next line and width,                               becomes the same */
    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>

thanks in advance and I’m sorry of this silly question

Tags:

2

Answers


  1. 0

    Why don’t you try this one, I have used position property and set the left and top in negative,

    .semi-circle {    
aspect-ratio: 1/1;
background: #3D4A6D;
border-radius: 80% 80% 80% 80%;
box-shadow: inset -3.5rem 1px 0 #364363,3.5rem 1px 0 #26324C;
width:90%;
position:absolute;
top:-100px;
left:-100px;       
}
    Login or Signup to reply.
  2. 0

    It’s not entirely clear what you’re trying to achieve, but maybe vmin unit will come in handy:

    .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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search