面包屑中的箭头根据 div 的高度进行调整

Question

我必须为所有尺寸制作面包屑。我在代码中面临的问题是调整伪元素中箭头的大小。目前我给 margin-bottom: -100px;边框顶部：52px；这些尺寸是随机的，如果 div 的文字或高度增加，将不起作用。

有没有办法让 div 之后的三角形响应所有高度？或任何其他方式来完成任务。

.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

使用 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>

面包屑中的箭头根据 div 的高度进行调整

Arrow in Breadcrumb to adjust as per div's height

html

css

breadcrumbs