Пример:
Угловое разделение цвета и фона текста
HTML:
|
1 2 3 |
<div class="h1" data-heading="Угловое разделение цвета текста"> Угловое разделение цвета текста </div> |
CSS:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
.h1 { text-align: center; position: relative; margin: 0; box-sizing: border-box; padding: 20px 10px; font-family: Verdana, sans-serif; font-weight: bold; color: #FFF; font-size: 46px; line-height: 56px; background: #BFE2FF; border: 20px solid #337AB7; z-index: 1; text-shadow: 0 0 12px rgba(0,0,0,0.5), 0 2px 6px rgba(0,0,0,0.7); text-transform: uppercase; transition: font-size 250ms cubic-bezier(0.59, 0.04, 0.3, 1.43); } @media screen and (max-width: 767px) { .h1 { font-size: 24px; line-height: 34px; } } .h1:after { content: attr(data-heading); position: absolute; padding: 20px 10px; box-sizing: border-box; left: 0; z-index: 2; overflow: hidden; white-space: wrap; width: 100%; height: 100%; top: 0; text-align: center; color: #BFE2FF; text-shadow: 0 0 12px rgba(0,0,0,0.5), 0 2px 6px rgba(0,0,0,0.7); background: #337AB7; clip-path: polygon(0 0, 100% 0, 100% 10%, 0 90%); } |
Для того чтобы изменить угол разделения текста, нужно редактировать стиль: clip-path: polygon(0 0, 100% 0, 100% 10%, 0 90%)
Добавить комментарий: