: перед "формой", содержащейся в div css - без переполнения

Я пытаюсь обрезать этот круг с помощью div: чтобы он аккуратно содержался внутри и не было переполнения. Мне сложно найти элегантное решение.

Пример конечной цели

.wrapper{
  background: #efefef;
  height: 250px;
}

.wrapper::before{
	width: 300px;
	height: 300px;
	border-radius: 500px;
	background-image: linear-gradient(to bottom, #F38A00, #EC6E00 100%);
	position: absolute;
	right: 20%;
    content: '';
    overflow: hidden;  	
}

<div class = "wrapper"></div>

css

11.05.2018 19:27

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

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

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

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

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

Ответы 1

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

На обертке нужно указать overflow: hidden и position: relative;.

.wrapper{
  position: relative;
  background: #efefef;
  height: 250px;
  overflow: hidden; 
}

.wrapper::before{
	width: 300px;
	height: 300px;
	border-radius: 500px;
	background-image: linear-gradient(to bottom, #F38A00, #EC6E00 100%);
	position: absolute;
	right: 20%;
    content: '';
     	
}