Ленточки и флажки для блоков на HTML/CSS

15.04.2022

5961

Несколько Примеров вёрстки лент и флажков на HTML и CSS.

Ленты слева и справа

HTML
CSS

<div class="box">
	<div class="ribbon-left">Популярный</div>
	<div class="ribbon-right">Популярный</div>
</div>

HTML

.box {
	width: 400px;
	border: 1px solid #ddd;
	height: 200px;
	position: relative;
	margin: 0 auto;
	background: #efefef;
}

/* Слева */
.ribbon-left {
	position: absolute;
	top: 18px;
	left: -11px;
	color: #fff;
	background: #32be5b;
	padding: 0 20px;
	height: 26px;
	line-height: 26px;
}
.ribbon-left:before {
	content: "";
	position: absolute;
	height: 0;
	width: 0;
	border-style: solid;
	border-color: #1f7538 transparent transparent;
	border-width: 8px 0px 17px 10px;
	top: 100%;
	left: 0;
}
.ribbon-left:after {
	content: "";
	position: absolute;
	right: -21px;
	top: 0;
	height: 0;
	width: 0;
	border: 13px solid transparent;
	border-left: 13px solid #32be5b;
	transform: scaleX(.65);
}

/* Справа */
.ribbon-right {
	position: absolute;
	top: 18px;
	right: -11px;
	color: #fff;
	background: #32be5b;
	padding: 0 20px;
	height: 26px;
	line-height: 26px;
}
.ribbon-right:before {
	content: "";
	position: absolute;
	left: -9px;
	top: 0;    
	height: 0;
	width: 0;
	border-style: solid;
	border-width: 13px 11px 13px 0;
	border-color: transparent #32be5b transparent transparent;
	transform: scaleX(.65);
}
.ribbon-right:after {
	content: "";
	position: absolute;
	height: 0;
	width: 0;
	border-style: solid;
	border-color: #1f7538 transparent transparent;
	border-width: 8px 10px 0 0;    
	top: 100%;
	right: 0;
}

CSS

Результат:

Другой вариант

HTML
CSS

<div class="box">
	<div class="ribbon-left">Популярный</div>
	<div class="ribbon-right">Популярный</div>
</div>

HTML

.box {
	width: 400px;
	border: 1px solid #ddd;
	height: 200px;
	position: relative;
	margin: 0 auto;
	background: #efefef;
}

/* Слева */
.ribbon-left {
 	position: absolute; 
	top: 20px;
	left: -20px;    
	background: #32be5b;
	padding: 5px 20px;
	box-shadow: 1px 1px 3px #878787;
	color: #fff;
}
.ribbon-left:after {
	content: '';
 	position: absolute; 
	top: 104%;
	left: 0;    
	width: 0;
	height: 0;
	line-height: 0;
	border-left: 20px solid transparent;
	border-top: 10px solid #c8c8c8;
}

/* Справа */
.ribbon-right {
 	position: absolute; 
	top: 20px;
	right: -20px;    
	background: #32be5b;
	padding: 5px 20px;
	box-shadow: 1px 1px 3px #878787;
	color: #fff;
}
.ribbon-right:after {
	content: '';
	position: absolute;
	top: 104%;
	right: 0;
	width: 0;
	height: 0;
	line-height: 0;
	border-right: 20px solid transparent;
	border-top: 10px solid #c8c8c8;
}

CSS

Результат:

Ленты на всю ширину блока

HTML
CSS

<div class="box">
	<span class="ribbon">Скидка 10%</span>
</div>

HTML

.box {
	width: 300px;
	border: 1px solid #ddd;
	height: 200px;
	position: relative;
	margin: 0 auto;
	background: #efefef;
}
.ribbon {
	display: block;
	width: calc(100% + 22px);
	height: 40px;
	line-height: 40px;
	text-align: center;
	margin-left: -11px;
	margin-right: -11px;
	background: #50d056;
	position: relative;
	top: 20px;
	color: #fff;
}
.ribbon:before {
	content: "";
	position: absolute;
	height: 0;
	width: 0;
	bottom: -10px;
	left: 0;
	border-top: 10px solid #317316;
	border-left: 10px solid transparent;
}
.ribbon:after {
	content: "";
	position: absolute;
	height: 0;
	width: 0;
	right: 0;
	bottom: -10px;
	border-top: 10px solid #317316;
	border-right: 10px solid transparent;
}

CSS

Результат:

Второй вариант

HTML
CSS

<div class="box">
	<span class="ribbon">Скидка 10%</span>
</div>

HTML

.box {
	width: 300px;
	border: 1px solid #ddd;
	height: 200px;
	position: relative;
	margin: 0 auto;
	background: #efefef;
}
.ribbon {
	display: block;
	width: calc(100% + 22px);
	height: 40px;
	line-height: 40px;
	text-align: center;
	margin-left: -11px;
	margin-right: -11px;
	background: #50d056;
	position: relative;
	top: 20px;
	color: #fff;
}
.ribbon:before {
	content: "";
	position: absolute;
	height: 0;
	width: 0;
	top: -10px;
	left: 0;
	border-bottom: 10px solid #317316;
	border-left: 10px solid transparent;
}
.ribbon:after {
	content: "";
	position: absolute;
	height: 0;
	width: 0;
	right: 0;
	bottom: -10px;
	border-top: 10px solid #317316;
	border-right: 10px solid transparent;
}

CSS

Результат:

Диагональные ленты по краям

HTML
CSS

<div class="box">
	<div class="ribbon-1">Скидка 1%</div>
	<div class="ribbon-2">Скидка 2%</div>
	<div class="ribbon-3">Скидка 3%</div>    
	<div class="ribbon-4">Скидка 4%</div>
</div>

HTML

.box {
	width: 600px;
	border: 1px solid #ddd;
	height: 400px;
	position: relative;
	margin: 0 auto;
	background: #efefef;
	overflow: hidden;
}

/* Верхний левый угол */
.ribbon-1 {
	width: 200px;
	padding: 16px;
	position: absolute;
	text-align: center;
	color: #f0f0f0;
	top: 30px;
	left: -60px;
	transform: rotate(-45deg);
	background-color: #e43;
}

/* Верхний правый угол */
.ribbon-2 {
	width: 200px;
	padding: 16px;
	position: absolute;
	text-align: center;
	color: #f0f0f0;
	top: 30px;
	right: -60px;
	transform: rotate(45deg);
	background-color: #39d;
}

/* Нижний правый угол */
.ribbon-3 {
	width: 200px;
	padding: 16px;
	position: absolute;
	text-align: center;
	color: #f0f0f0;
	bottom: 30px;
	right: -60px; 
	transform: rotate(-45deg);
	background-color: #2c7; 
}

/* Нижний левый угол */
.ribbon-4 {
	width: 200px;
	padding: 16px;
	position: absolute;
	text-align: center;
	color: #f0f0f0;
	bottom: 30px;
	left: -60px;
	transform: rotate(45deg);
	background-color: #e82;
}

CSS

Результат:

<div class="box">
	<div class="ribbon-1"><span>1%</span></div>
	<div class="ribbon-2"><span>2%</span></div>
	<div class="ribbon-3"><span>3%</span></div>
	<div class="ribbon-4"><span>4%</span></div>
	<div class="ribbon-5"><span>5%</span></div>
</div>

HTML

.box {
	width: 600px;
	border: 1px solid #ddd;
	height: 160px;
	position: relative;
	margin: 0 auto;
	background: #efefef;
}

/* 1 - чёрный */
.ribbon-1 {
	position: absolute;
	left: 66px;
	top: -3px;
	filter: drop-shadow(2px 3px 2px rgba(0, 0, 0, 0.5));
}
.ribbon-1 span {
	display: block;
	color: #fff;
	font-size: 16px;
	text-align: center;
	background: #000;
	width: 40px;
	line-height: 56px;
	clip-path: polygon(0 0, 100% 0, 100% 90%, 50% 95%, 0 100%);	
}

/* 2 - зелёный */
.ribbon-2 {
	position: absolute;
	left: 172px;
	top: -3px;
	filter: drop-shadow(2px 3px 2px rgba(0, 0, 0, 0.5));
}
.ribbon-2 span {
	display: block;
	color: #fff;
	font-size: 16px;
	text-align: center;
	background: #09cf61;
	width: 40px;
	line-height: 56px;
	clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 95%, 0 90%);
}

/* 3 - синий */
.ribbon-3 {
	position: absolute;
	left: 278px;
	top: -3px;
	filter: drop-shadow(2px 3px 2px rgba(0, 0, 0, 0.5));
}
.ribbon-3 span {
	display: block;
	color: #fff;
	font-size: 16px;
	text-align: center;
	background: #0974cf;
	width: 40px;
	line-height: 56px;
	clip-path: polygon(0 0, 100% 0, 100% 85%, 50% 100%, 0 85%);
}

/* 4 - фиолетовый */
.ribbon-4 {
	position: absolute;
	left: 384px;
	top: -3px;
	filter: drop-shadow(2px 3px 2px rgba(0, 0, 0, 0.5));
}
.ribbon-4 span {
	display: block;
	color: #fff;
	font-size: 16px;
	text-align: center;
	background: #9509cf;
	width: 40px;
	line-height: 56px;
	clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 85%, 0 100%);
}

/* 5 - красный */
.ribbon-5 {
	position: absolute;
	left: 490px;
	top: -3px;
	filter: drop-shadow(2px 3px 2px rgba(0, 0, 0, 0.5));
}
.ribbon-5 span {
	display: block;
	color: #fff;
	font-size: 16px;
	text-align: center;
	background: #ee4433;
	width: 40px;
	line-height: 56px;
	clip-path: polygon(0 0, 100% 0, 100% 80%, 40% 100%, 0 90%);
}

CSS