This question has already been answered:

How to make the first corner of the line? That is, before the word мебель was flat side. It turned out to be done only this way, but something is not right.

 .speedbar a:nth-child(1)::before { border-left: 17px solid #ef5350; border-radius: 2px; } 

 .speedbar { margin: 0 10px 10px 8px; text-transform: uppercase; text-align: left; } .speedbar a, .speedbar b { background: #ef5350; border-radius: 2px 0 0 2px; margin: 4px 0px 0 4px; padding: 8px 17px 8px 30px; position: relative; text-align: center; color: #fff; line-height: 1.5; box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14),0 1px 5px 0 rgba(0,0,0,0.12),0 3px 1px -2px rgba(0,0,0,0.2); } .speedbar a::after, .speedbar b::after { border-bottom: 17px solid transparent; border-left: 17px solid #ef5350; border-top: 17px solid transparent; content: ""; position: absolute; right: -17px; top: 0; z-index: 1; } .speedbar a::before, .speedbar b::before { border-bottom: 17px solid transparent; border-left: 17px solid #eee; border-top: 17px solid transparent; content: ""; left: 0; position: absolute; top: 0; } .speedbar b { font-weight: 400; } .speedbar b span { font-size: 12px; position: relative; top: -1px; margin-right: 10px; background: #eee; padding: 5px 8px; border-radius: 2px; color: #555; } 
 <span class="speedbar" id="dle-speedbar"> <span itemscope="" itemtype="http://data-vocabulary.org/Breadcrumb"> <a href="/" itemprop="url"> <span itemprop="title">Мебель</span> </a> </span> <span itemscope="" itemtype="http://data-vocabulary.org/Breadcrumb"> <a href="/lastnews/" itemprop="url"> <span itemprop="title">Работы</span> </a> </span> <span itemscope="" itemtype="http://data-vocabulary.org/Breadcrumb"> <a href="/kuhni/" itemprop="url"> <span itemprop="title">Кухни</span> </a> </span> <b>KU-0062</b> </span>

Reported as a duplicate by LFC participants, 0xdb , aleksandr barakin , Enikeyschik , Andrey NOP on Feb. 8 at 6:28 .

A similar question was asked earlier and an answer has already been received. If the answers provided are not exhaustive, please ask a new question .

  • The duplicate has the desired implementation - LFC
  • I do this .speedbar :first-child a:before {display: none; } .speedbar :first-child a:before {display: none; } For some reason, the second before hidden? - steep
  • And the text KU-0062, so conceived in general <span> hang? <b></b> is a bold text as I recall - LFC
  • Yes, you can't get him anywhere - steep
  • Initially, there was just a text, I wrapped it in b to prescribe styles - steep

1 answer 1

Desired outcome?

 .speedbar { margin: 0 10px 10px 8px; text-transform: uppercase; text-align: left; } .speedbar a, .speedbar b { background: #ef5350; border-radius: 2px 0 0 2px; margin: 4px 0px 0 4px; padding: 8px 17px 8px 30px; position: relative; text-align: center; color: #fff; line-height: 1.5; box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14),0 1px 5px 0 rgba(0,0,0,0.12),0 3px 1px -2px rgba(0,0,0,0.2); } .speedbar a::after, .speedbar b::after { border-bottom: 17px solid transparent; border-left: 17px solid #ef5350; border-top: 17px solid transparent; content: ""; position: absolute; right: -17px; top: 0; z-index: 1; } .speedbar a::before, .speedbar b::before { border-bottom: 17px solid transparent; border-left: 17px solid #eee; border-top: 17px solid transparent; content: ""; left: 0; position: absolute; top: 0; } .speedbar b { font-weight: 400; } .speedbar b span { font-size: 12px; position: relative; top: -1px; margin-right: 10px; background: #eee; padding: 5px 8px; border-radius: 2px; color: #555; } .speedbar span:first-child a::before { border: 0; } 
 <span class="speedbar" id="dle-speedbar"> <span itemscope="" itemtype="http://data-vocabulary.org/Breadcrumb"> <a href="/" itemprop="url"> <span itemprop="title">Мебель</span> </a> </span> <span itemscope="" itemtype="http://data-vocabulary.org/Breadcrumb"> <a href="/lastnews/" itemprop="url"> <span itemprop="title">Работы</span> </a> </span> <span itemscope="" itemtype="http://data-vocabulary.org/Breadcrumb"> <a href="/kuhni/" itemprop="url"> <span itemprop="title">Кухни</span> </a> </span> <b>KU-0062</b> </span>

  • There will be another version of the triangles))), in any case, a duplicate - LFC