HTML/CSS

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

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

<div class="arrow">
    Пример блока со стрелкой CSS
</div>
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;
}

По центру:

.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;
}

Справа:

.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;
}
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;
}

По центру:

.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;
}

Справа:

.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;
}
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;
}

По центру:

.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;
}

Снизу:

.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;
}
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;
}

По центру:

.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;
}

Снизу:

.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;
}
14 марта 2019
Такой эффект можно легко сделать через CSS свойство transition например для кнопок, меню и т.д.
Цвет карты можно изменить начиная с версии 2.0 с помощью CCS фильтров, применив их к элементу .ymaps-layers-pane
Оригинальный размер капчи составляет 304x78px и чаще всего она не помещается в габариты форм сайта. Исправить это можно...
В данном примере описано как сделать интерактивную схему магазинов на основе векторной графики SVG и jQuery.