Здравствуйте,помогите,пожалуйста,создать вот такие вот треугольники...У меня,правда,нет идей. Уже гуглил на эту тему,но ничего стоящего не нашел. Изображением вставлять не канает. Нужно именно с помощью CSS.
Ответ
Gradient Generator - colorzilla.com
CSS triangle generator - http://apps.eky.hk/css-triangle-generator/
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.b-breadcrumbs {
text-align: center;
font-size: 0;
background: #271E19;
padding: 25px;
line-height: 1.15;
}
.b-breadcrumbs > li {
display: inline-block;
vertical-align: top;
font-size: 16px;
margin-left: 34px;
}
.b-breadcrumbs > li > a {
height: 48px;
position: relative;
display: block;
color: #000;
font-weight: 700;
padding: 15px;
background: -moz-linear-gradient(top, rgba(255, 201, 55, 1) 0%, rgba(255, 201, 55, 1) 50%, rgba(255, 165, 35, 1) 50%, rgba(255, 165, 35, 1) 100%);
/* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(255, 201, 55, 1) 0%, rgba(255, 201, 55, 1) 50%, rgba(255, 165, 35, 1) 50%, rgba(255, 165, 35, 1) 100%);
/* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(255, 201, 55, 1) 0%, rgba(255, 201, 55, 1) 50%, rgba(255, 165, 35, 1) 50%, rgba(255, 165, 35, 1) 100%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
.b-breadcrumbs > li > a:before,
.b-breadcrumbs > li > a:after {
content: '';
position: absolute;
left: 100%;
width: 0;
height: 0;
border-style: solid;
}
.b-breadcrumbs > li > a:before {
top: 0;
border-width: 24px 0 0 24px;
border-color: transparent transparent transparent #FFC937;
}
.b-breadcrumbs > li > a:after {
bottom: 0;
border-width: 24px 24px 0 0;
border-color: #FFA523 transparent transparent transparent;
}
.b-breadcrumbs > li:last-child > a:before,
.b-breadcrumbs > li:last-child > a:after {
display: none;
}
.b-breadcrumbs > li > a > span {
position: absolute;
top: 0;
right: 100%;
height: 100%;
width: 24px;
}
.b-breadcrumbs > li > a > span:before,
.b-breadcrumbs > li > a > span:after {
content: '';
position: absolute;
width: 0;
height: 0;
border-style: solid;
left: 0;
}
.b-breadcrumbs > li > a > span:before {
top: 0;
border-width: 0 24px 24px 0;
border-color: transparent #FFC937 transparent transparent;
}
.b-breadcrumbs > li > a > span:after {
bottom: 0;
border-width: 0 0 24px 24px;
border-color: transparent transparent #FFA523 transparent;
}
.b-breadcrumbs > li > a:hover {
color: #fff;
background: red;
}
.b-breadcrumbs > li > a:hover:before {
border-left-color: red;
}
.b-breadcrumbs > li > a:hover:after {
border-top-color: red;
}
.b-breadcrumbs > li > a:hover > span:before {
border-right-color: red;
}
.b-breadcrumbs > li > a:hover > span:after {
border-bottom-color: red;
}
Вариант 2 - с использованием clip-path
* { padding: 0; margin: 0; box-sizing: border-box; } .b-breadcrumbs { text-align: center; font-size: 0; background: #271E19; padding: 25px; } .b-breadcrumbs > li { display: inline-block; vertical-align: top; font-size: 16px; margin-left: 0; } .b-breadcrumbs > li > a { position: relative; display: block; color: #000; font-weight: 700; padding: 15px 25px; background: -moz-linear-gradient(top, rgba(255, 201, 55, 1) 0%, rgba(255, 201, 55, 1) 50%, rgba(255, 165, 35, 1) 50%, rgba(255, 165, 35, 1) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, rgba(255, 201, 55, 1) 0%, rgba(255, 201, 55, 1) 50%, rgba(255, 165, 35, 1) 50%, rgba(255, 165, 35, 1) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, rgba(255, 201, 55, 1) 0%, rgba(255, 201, 55, 1) 50%, rgba(255, 165, 35, 1) 50%, rgba(255, 165, 35, 1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ -webkit-clip-path: polygon(0 0, 90% 0, 100% 50%, 90% 100%, 0 100%, 10% 50%); clip-path: polygon(0 0, 90% 0, 100% 50%, 90% 100%, 0 100%, 10% 50%); } .b-breadcrumbs > li:first-child > a{ padding-left: 15px; -webkit-clip-path: polygon(90% 0, 100% 50%, 90% 100%, 0 100%, 0 0); clip-path: polygon(90% 0, 100% 50%, 90% 100%, 0 100%, 0 0); } .b-breadcrumbs > li:last-child > a{ padding-right: 15px; -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 10% 50%); clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 10% 50%); } .b-breadcrumbs > li > a:hover{ color: #fff; background: red; }
Комментариев нет:
Отправить комментарий