Hello, help, please, create here such triangles ... I, really, have no ideas. Already googled on this topic, but found nothing worthwhile. Image insert does not channel. It is necessary with the help of CSS. enter image description here enter image description here

2 answers 2

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>

Option 2 - using the 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
    Your answer is not cross-browser, in Mozilla the 2nd option is displayed in the form of ordinary rectangles, in the 1st line in the center - Alex
  • I know this - in the second version support by browsers caniuse.com/#feat=css-clip-path - soledar10
  • @Alex - 1 version corrected - soledar10

The triangle itself can be obtained by setting different colors to the borders of different sides of the element, and adding to the element using pseudo-elements: 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>

  • This answer draws a maximum on the comment. Provide a more detailed answer and attach code samples. And do not give answers, links, because after some time the link may become inoperative and your answer will not make sense. - neluzhin
  • I agree on all points. Thank. - Solid