Arrow in Breadcrumb to adjust as per div's height

Question

I have to make a breadcrumb for all sizes. The problem I'm facing in my code is adjust the size of arrows in pseudo elements. Currently I'm givng the margin-bottom: -100px; border-top: 52px; These are random sizes and will not work in case the text or height of div increases.

Is there a way to make the triangle after the div responsive for all heights? or any other way to achieve the task.

 .brdcr-wrap { padding: 60px 0 120px 0; overflow: hidden; } .brdcr-box { width: calc((100% - 60px) / 4); margin-right: 20px; float: left; background-color: grey; position: relative; } .brdcr-box:before { content: ""; display: block; margin-bottom: -100px; border-top: 52px solid transparent; border-bottom: 52px solid transparent; border-left: 19px solid #fff; } .brdcr-box:after { content: ""; display: block; margin-top:-104px; margin-left: -20px; border-top: 52px solid transparent; border-bottom: 52px solid transparent; border-left: 20px solid grey; } .brdcr-box:last-child { margin-right: 0; } .brdcr-box:first-child::before { content: none; } .brdcr-txt { padding-left: 30px; } 

 <div class="col12 brdcr-wrap clearfix"> <div class="brdcr-box"><p class="brdcr-txt">Lorem ipsum dolor sit amet, possim dissentiet cu eos, verear malorum evertitur cu ius, expetenda qualisque an sea. Lorem ipsum dolor sit amet, possim dissentiet cu eos, verear malorum evertitur cu ius, expetenda qualisque an sea.</p></div> <div class="brdcr-box"><p class="brdcr-txt">Lorem ipsum dolor sit amet, possim dissentiet cu eos, verear malorum evertitur cu ius, expetenda qualisque an sea. Lorem ipsum dolor sit amet, possim dissentiet cu eos, verear malorum evertitur cu ius, expetenda qualisque an sea.</p></div> <div class="brdcr-box"><p class="brdcr-txt">Lorem ipsum dolor sit amet, possim dissentiet cu eos, verear malorum evertitur cu ius, expetenda qualisque an sea. Lorem ipsum dolor sit amet, possim dissentiet cu eos, verear malorum evertitur cu ius, expetenda qualisque an sea.</p></div> <div class="brdcr-box"><p class="brdcr-txt">Lorem ipsum dolor sit amet, possim dissentiet cu eos, verear malorum evertitur cu ius, expetenda qualisque an sea. Lorem ipsum dolor sit amet, possim dissentiet cu eos, verear malorum evertitur cu ius, expetenda qualisque an sea.</p></div> </div> 

Answer 1

Use a clip-path

The clip-path CSS property creates a clipping region that defines what part of an element should be displayed. Those portions that are inside the region are shown, while those outside are hidden. The clipping region is a path specified either as a URL referencing inline or external SVG, or as a shape, such as a circle().

^MDN

 .brdcr-wrap { overflow: hidden; margin: 1em; } .brdcr-box { display: inline-block; margin-right: 20px; position: relative; } .brdcr-txt { padding: 10px 30px 10px 40px; background-color: grey; clip-path: polygon(calc(100% - 30px) 0%, 100% 50%, calc(100% - 30px) 100%, 0% 100%, 30px 50%, 0% 0%); } 

 <div class="col12 brdcr-wrap"> <div class="brdcr-box"> <p class="brdcr-txt">Lorem ipsum dolor sit amet, possim dissentiet cu eos,.</p> </div> </div> <div class="col12 brdcr-wrap"> <div class="brdcr-box"> <p class="brdcr-txt">Lorem ipsum dolor sit amet, possim dissentiet cu eos, verear malorum evertitur cu ius, expetenda qualisque an sea. Lorem ipsum dolor sit amet, possim dissentiet cu eos, verear malorum evertitur cu ius, expetenda qualisque an sea.Lorem ipsum dolor sit amet, possim dissentiet cu eos, verear malorum evertitur cu ius, expetenda qualisque an sea. Lorem ipsum dolor sit amet, possim dissentiet cu eos, verear malorum evertitur cu ius, expetenda qualisque an sea</p> </div> </div>