В этом статье разберем, как можно самостоятельно сделать подсказку с выводом ключевых слов, также узнаете про треугольники, которые ранее разбирали, что созданы на чистом CSS, а теперь их применим к подсказкам. Давайте рассмотрим, где могут применяться такой вид треугольника. Большинство их может замечать при стилизации всплывающих подсказок, где есть вариант для разных ключевых слов.
Но бывает такое, что в такой ситуаций нужно выстроить нестандартную форму треугольника. Больше всего пользователи на сайтах любой тематики видят такой вид подсказки, что представлена в низу.
Теперь вы можете выставить на ключевых фразах такой незатейливый дизайн, который пока представлен в простом виде. Где уже сами можете добавить оформление, но и по дизайн, это поставить саму форму и выстроить треугольник, про который в этом материале можно рассмотреть его более подробнее.
HTML
Код
<div class="tasolpas-merdsab">Здесь написана ключевая фраза</div>
CSS
Код
.tasolpas-merdsab {
background: #232121;
padding: 5px 12px;
display: inline-block;
color: #f5f0f0;
font-size: 19px;
border-radius: 3px;
bottom: 15px;
position: relative;
}
.tasolpas-merdsab:before {
content: "";
border: 5px solid rgba(0, 0, 0, 0);
border-top: 22px solid #232121;
position: absolute;
top: 25px;
transform: rotate(30deg);
left: 3px;
}
Стиль здесь простой и не чего лишнего в него не добавлено, где при написание все устанавливается стандартно по центру, это для того, чтоб было отлично видно и безусловно читабельно.
Демонстрация
