Здравствуйте,помогите,пожалуйста,создать вот такие вот треугольники...У меня,правда,нет идей. Уже гуглил на эту тему,но ничего стоящего не нашел. Изображением вставлять не канает. Нужно именно с помощью CSS.
-
1Возможный дубликат вопроса: Div треугольником– MobiDevices23 янв 2017 в 8:38
Добавить комментарий
|
2 ответа
Сам треугольник можно получить задавая различные цвета границам разных сторон элемента, а добавить к элементу - используя псевдоэлементы :before :after
.block {
background: green;
display: inline-block;
position: relative;
color: #fff;
width: 120px;
height: 20px;
margin: 10px;
}
.block::after {
content: '';
position: absolute;
left: 120px; /* Положение треугольника */
border: 10px solid transparent;
border-left: 10px solid green;
}
.second::before {
content: '';
position: absolute;
left: -20px;
border: 10px solid green;
border-left: 10px solid transparent;
}
<div class="block">
Концепция
</div>
<div class="block second">
Реализация
</div>
-
Этот ответ тянет максимум на комментарий. Предоставьте более развернутый ответ и приложите примеры кода. И не надо давать ответы-ссылки, потому что спустя какое-то время ссылка может стать нерабочей и от вашего ответа не будет смысла. 23 янв 2017 в 5:03
-
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;
}
<ul class="b-breadcrumbs">
<li><a href="#">Item 1</a>
</li>
<li><a href="#"><span></span>Item 2</a>
</li>
<li><a href="#"><span></span>Item 3</a>
</li>
<li><a href="#"><span></span>Item 4</a>
</li>
</ul>
Вариант 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;
}
<ul class="b-breadcrumbs">
<li><a href="#">Item 1</a></li>
<li><a href="#"><span></span>Item 2</a></li>
<li><a href="#"><span></span>Item 3</a></li>
<li><a href="#"><span></span>Item 4</a></li>
</ul>
-
2Ваш ответ не кроссбраузерный, в мозилле 2-й вариант отображается ввиде обычных прямоугольников, в 1-м по центру линия– Alex23 янв 2017 в 5:59
-
Я это знаю - во втором варианте поддержка браузерами caniuse.com/#feat=css-clip-path 23 янв 2017 в 6:01
-