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

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

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

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

Слева

.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
2

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

Слева

.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
3

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

Сверху

.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
4

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

Сверху

.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
14.03.2019, обновлено 28.08.2019 254

Поделится

Темы

Border CSS

Другие публикации

Пример, как сделать Яндекс карту не прямоугольной формы т.е. наложить изображение (маску) по верх карты со сохранением...
Приемы как сделать шахматную сетку на псевдо-свойстве :nth-child().
Первыми тегами для зачёркнутого текста были strike и s. C приходом HTML 4 их использование стало осуждается, а в HTML 5...
В отличии предыдущего меню, где есть отступы у каждого элемента, часто возникает задача сделать резиновое меню без них....
Библиотека GD дает возможность работать с изображениями в PHP. Далее представлены примеры как изменить размер, вырезать...