Init HTML

Nghiêng

HTML

<div class="section-skewed">
	<div class="skewed"></div>
</div>

CSS

.section-skewed {
  	position: relative;
  	height: 200px;
  	overflow: hidden;
}
.skewed {
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #2c3e50;
	z-index: 0;
	transform: skewY(6deg);
	transform-origin: top right;
}

Bán nguyệt

HTML

<section class="semicircle"></section>

CSS

.semicircle {
	position: relative;
	background: #2c3e50;
	height: 200px;
}
.semicircle::before {
	position: absolute;
	content: '';
	left: 50%;
	z-index: 10;
	width: 100px;
	height: 100px;
	border-radius: 50%;
	background: inherit;
	transform: translateX(-50%) translateY(50%);
	bottom: 0px;
}

Sóng

HTML

<section class="section-wave">
    <div class="wave"></div>
</section>

CSS

.section-wave {
    position: relative;
    background: #2c3e50;
    height: 200px;
}
.wave {
    position: absolute;
    height: 70px;
    width: 100%;
    background: #2c3e50;
    bottom: 0;
}
.wave::before, .wave::after {
    content: "";
    display: block;
    position: absolute;
    border-radius: 100% 50%;
}
.wave::before {
    width: 55%;
    height: 109%;
    background-color: #fff;
    right: -1.5%;
    top: 60%;
}
.wave::after {
    width: 55%;
    height: 100%;
    background-color: #2c3e50;
    left: -1.5%;
    top: 40%;
}

Răng cưa

HTML

<section class="spikes"></section>

CSS

.spikes {
    position: relative;
    background: #2c3e50;
    height: 200px;
}
.spikes::after {
    content: '';
    position: absolute;
    right: 0;
    left: -0%;
    top: 100%;
    z-index: 10;
    display: block;
    height: 50px;
    background-size: 50px 100%;
    background-image: linear-gradient(135deg, #2c3e50 25%, transparent 25%), linear-gradient(225deg, #2c3e50 25%, transparent 25%);
    background-position: 0 0;
}

Tam giác

HTML

<section class="triangle"></section>

CSS

.triangle {
    position: relative;
    background: #2c3e50;
    height: 200px;
}
.triangle::before {
    content: '';
    position: absolute;
    bottom: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 50px 50px 0 50px;
    border-color: #2c3e50 transparent transparent transparent;
    left: 50%;
    transform: translateX(-50%) translateY(100%);
}

Cong

HTML

<section class="curved"></section>

CSS

.curved {
    position: relative;
    background: #2c3e50;
    height: 200px;
    border-bottom-left-radius: 50% 20%;
    border-bottom-right-radius: 50% 20%;
}

Chúc các bạn thành công!