Блоки со стрелками (часть 1)

14.03.2019

26949

Добавить стрелки к блоку (tooltip) можно с помощью псевдо-элемента :before.

<div class="arrow">
	Пример блока со стрелкой CSS
</div>

HTML

Стрелки сверху

Слева

.arrow {
	width: 300px;
	padding: 10px 10px;
	position: relative;
	background: #eee;
	border-radius: 3px;
}
.arrow:before {
	content: ""; 
	border: solid transparent;
	position: absolute;    
	left: 8px;    
	bottom: 100%;
	border-bottom-color: #eee;
	border-width: 9px;
	margin-left: 0;
}

CSS

По центру

.arrow {
	width: 300px;
	padding: 10px 10px;
	position: relative;
	background: #eee;
	border-radius: 3px;
}
.arrow:before {
	content: ""; 
	border: solid transparent;
	position: absolute;   
	bottom: 100%;
	left: 50%;
	border-bottom-color: #eee;
	border-width: 9px;
	margin-left: -9px;
}

CSS

Справа

.arrow {
	width: 300px;
	padding: 10px 10px;
	position: relative;
	background: #eee;
	border-radius: 3px;   
}
.arrow:before {
	content: ""; 
	border: solid transparent;
	position: absolute; 
	bottom: 100%;
	right: 8px;
	border-bottom-color: #eee;
	border-width: 9px;
	margin-right: -1px;
}

CSS

Стрелки снизу

Слева

.arrow {
	width: 300px;
	padding: 10px 10px;
	position: relative;
	background: #eee;
	border-radius: 3px;   
}
.arrow:before {
	content: ""; 
	border: solid transparent;
	position: absolute; 
 	top: 100%;
	left: 16px;
	border-top-color: #eee;
	border-width: 9px;
	margin-left: -1px;
}

CSS

По центру

.arrow {
	width: 300px;
	padding: 10px 10px;
	position: relative;
	background: #eee;
	border-radius: 3px;   
}
.arrow:before {
	content: ""; 
	border: solid transparent;
	position: absolute;
 	top: 100%;
	left: 50%;
	border-top-color: #eee;
	border-width: 9px;
	margin-left: -9px;
}

CSS

Справа

.arrow {
	width: 300px;
	padding: 10px 10px;
	position: relative;
	background: #eee;
	border-radius: 3px;   
}
.arrow:before {
	content: ""; 
	border: solid transparent;
	position: absolute; 
 	top: 100%;
	right: 8px;
	border-top-color: #eee;
	border-width: 9px;
	margin-right: -1px;
}

CSS

Стрелки слева

Сверху

.arrow {
	width: 300px;
	padding: 20px 10px;
	position: relative;
	background: #eee;
	border-radius: 3px;   
}
.arrow:before {
	content: ""; 
	border: solid transparent;
	position: absolute;  
	right: 100%;
	top: 8px;
	border-right-color: #eee;
	border-width: 9px;
	margin-top: -1px;
}

CSS

По центру

.arrow {
	width: 300px;
	padding: 20px 10px;
	position: relative;
	background: #eee;
	border-radius: 3px;   
}
.arrow:before {
	content: ""; 
	border: solid transparent;
	position: absolute;  
	right: 100%;
	top: 50%;
	border-right-color: #eee;
	border-width: 9px;
	margin-top: -9px;
}

CSS

Снизу

.arrow {
	width: 300px;
	padding: 20px 10px;
	position: relative;
	background: #eee;
	border-radius: 3px;   
}
.arrow:before {
	content: ""; 
	border: solid transparent;
	position: absolute;    
	right: 100%;
	bottom: 8px;
	border-right-color: #eee;
	border-width: 9px;
	margin-bottom: -1px;
}

CSS

Стрелки справа

Сверху

.arrow {
	width: 300px;
	padding: 20px 10px;
	position: relative;
	background: #eee;
	border-radius: 3px;   
}
.arrow:before {
	content: ""; 
	border: solid transparent;
	position: absolute;    
	left: 100%;
	top: 8px;
	border-left-color: #eee;
	border-width: 9px;
	margin-top: -1px;
}

CSS

По центру

.arrow {
	width: 300px;
	padding: 20px 10px;
	position: relative;
	background: #eee;
	border-radius: 3px;   
}
.arrow:before {
	content: ""; 
	border: solid transparent;
	position: absolute;    
	left: 100%;
	top: 50%;
	border-left-color: #eee;
	border-width: 9px;
	margin-top: -9px;
}

CSS

Снизу

.arrow {
	width: 300px;
	padding: 20px 10px;
	position: relative;
	background: #eee;
	border-radius: 3px;   
}
.arrow:before {
	content: ""; 
	border: solid transparent;
	position: absolute;    
	left: 100%;
	bottom: 8px;
	border-left-color: #eee;
	border-width: 9px;
	margin-bottom: -1px;
}

CSS