: перед "shape" содержится в div css - без переполнения

Question

Я пытаюсь обрезать этот круг с помощью 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>

Answer 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: '';
     	
}

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