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

14.03.2019

6685

В продолжении первой части, примеры как добавить стрелки к блоку tooltip с рамкой. Используются оба псевдо-элемента :before и :after.

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

HTML

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

Слева

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

CSS

По центру

.arrow {
	width: 300px;
	padding: 10px;
	position: relative;
	background: #fff;
	border: 1px solid orange;
}
.arrow:after, .arrow:before {
	content: ""; 
	border: solid transparent;
	position: absolute;   
	bottom: 100%;
	left: 50%;
}
.arrow:after {
	border-bottom-color: #fff;
	border-width: 8px;
	margin-left: -8px;
}
.arrow:before {
	border-bottom-color: orange;
	border-width: 9px;
	margin-left: -9px;
}

CSS

Справа

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

CSS

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

Слева

.arrow {
	width: 300px;
	padding: 10px;
	position: relative;
	background: #fff;
	border: 1px solid orange;
}
.arrow:after, .arrow:before {
	content: ""; 
	border: solid transparent;
	position: absolute; 
 	top: 100%;
	left: 16px;
}
.arrow:after {
	border-top-color: #fff;
	border-width: 8px;
	margin-left: 0;
}
.arrow:before {
	border-top-color: orange;
	border-width: 9px;
	margin-left: -1px;
}

CSS

По центру

.arrow {
	width: 300px;
	padding: 10px;
	position: relative;
	background: #fff;
	border: 1px solid orange;
}
.arrow:after, .arrow:before {
	content: ""; 
	border: solid transparent;
	position: absolute;
 	top: 100%;
	left: 50%;
}
.arrow:after {
	border-top-color: #fff;
	border-width: 8px;
	margin-left: -8px;
}
.arrow:before {
	border-top-color: orange;
	border-width: 9px;
	margin-left: -9px;
}

CSS

Справа

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

CSS

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

Сверху

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

CSS

По центру

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

CSS

Снизу

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

CSS

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

Сверху

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

CSS

По центру

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

CSS

Снизу

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

CSS