css
div {
margin: 50px;
width: 100px;
height: 100px;
background: red;
}
/* 扇形 */
.sector {
border-radius: 100px 0 0;
}
/* 三角 */
.triangle {
width: 0px;
height: 0px;
background: none;
border: 50px solid red;
border-color: red transparent transparent transparent;
}
/* 梯形 */
.ladder {
width: 50px;
height: 0px;
background: none;
border: 50px solid red;
border-color: red transparent transparent transparent;
}
html
<div class="sector"></div>
<div class="triangle"></div>
<div class="ladder"></div>