Полуэкранный полукруг слева

Можно ли создать полукруг, как показано ниже, с помощью css?

Если да, может ли кто-нибудь объяснить мне, как это сделать, или где я могу найти учебные пособия для изучения? Мое меню и нижний колонтитул уже на месте. Я просто хочу знать, как рисовать полукруги, похожие на эти, и приложение может работать на разных размерах экрана, а изображение полукругов должно адаптироваться к размеру экрана.

<template>
    <v-container fluid class = "semi-circle">
        
    </v-container>
</template>
<style>
* {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
}

.semi-circle {
  width: 50%;
  height: 100%;
  background: #505c7b;
  border-radius: 0 100% 100% 0;
  box-shadow: inset -3.5rem 1px 0 #7d869c, 
                    3.5rem 1px 0 #bec2cd;
}


</style>

и мой результат:

что ты уже испробовал? не должно быть сложно с псевдоэлементами и абсолютным или фиксированным позиционированием.

— 14.08.2023 13:08

Попробуйте использовать единицу измерения окна просмотра CSS, например ширину окна просмотра или процент: web.dev/viewport-units

— 14.08.2023 14:00

javascript html css vue.js vuetify.js

14.08.2023 12:35

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

* {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
}

.semi-circle {
  width: 10rem;
  height: 20rem;
  background: #505c7b;
  border-radius: 0 10rem 10rem 0;
  box-shadow: inset -1.5rem 1px 0 #7d869c, 
                    1.5rem 1px 0 #bec2cd;
}

<div class = "semi-circle"></div>

спасибо, это помогло мне. Извините, но это мои первые шаги с фронтом :b как я могу поставить изображение как половину экрана? извини

— 14.08.2023 13:57

14.08.2023 13:11

Чтобы создать полукруг, повернутый вправо, вы можете использовать свойство преобразования в CSS для поворота элемента. Вот пример того, как создать повернутый полукруг:

.rotated-semi-circle {
  width: 100px; /* Adjust the width as needed */
  height: 50px; /* Half of the width to create a semi-circle */
  background-color: #3498db; /* Adjust the color as needed */
  border-radius: 0 0 50px 50px; /* Border radius to create the semi-circle shape */
  transform: rotate(270deg); /* Rotate the semi-circle to the right by 45 degrees */
  transform-origin: bottom; /* Set the rotation origin */
}

<div class = "rotated-semi-circle"></div>

14.08.2023 13:19

Ответ принят как подходящий

Это должно работать, я проверил это, и я также прокомментировал строки, которые я изменил. (3 строки)

Надеюсь, это поможет вам!

html, body {
  height:100%;
  margin:0;
}

.semi-circle {
  aspect-ratio: 1/1; /* 1:1 aspect-ratio, so the height we specified in the next line and width,                               becomes the same */
  height: 100vh; /* 100vh means the entire height of the viewport (viewport means the area which can be                     "viewed" */
  transform: translateX(-50%); /* using translateX we can move the circle, in the "X" axis (that is, in                                   the left-right direction), -50% (negative because we moving it to the                                   left) of its size, so half the circle gets moven out of the screen */ 
  background: #505c7b;
  border-radius: 50%;
  box-shadow: inset -3.5rem 1px 0 #7d869c, 
                    3.5rem 1px 0 #bec2cd;
}