Question

我必须为所有尺寸制作面包屑。我在代码中遇到的问题是调整伪元素中箭头的大小。目前我正在寻找利润率：-100px; border-top：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

clip-path CSS属性创建一个剪切区域，用于定义元素的哪个部分应显示。显示区域内的那些部分，而外部的那些部分被隐藏。裁剪区域是指定为引用内联或外部SVG的URL或路径（如circle（））的路径。

^MDN

＆＃13;

.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%);
}

＆＃13;

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

＆＃13;

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

1 个答案: