此箭头样式可以通过可变高度来实现吗？ [重复]

问题描述 投票：0回答：1

这是我当前拥有的元素的演示，其样式设计为具有指向右侧的箭头状结尾：

.label {
  position: relative;
  display: inline-block;
  padding: .5rem .75rem;
  line-height: 1rem;
  color: white;
  background-color: darkred;
  box-sizing: border-box;
}
  .label:after {
    content: ' ';
    position: absolute;
    top: 0;
    right: -.5rem;
    border-top: 1rem solid transparent;
    border-left: .5rem solid darkred;
    border-bottom: 1rem solid transparent;
    box-sizing: border-box;
  }
<span class="label">
  BREAKING NEWS
</span>

<br><br>

<span class="label">
  BREAKING <br> 
  NEWS
</span>

但是，由于border-width不接受百分比，因此这意味着我无法将小箭头附件的高度声明为元素高度的50％。相反，我必须将该附肢的边界声明为特定高度（在我的情况下为1rem）。这意味着这种解决方案不能支持跨越多于1行的文本，因为箭头附件不再适合元素的高度。

因此，它的第一个用法是我想要的外观，第二个用法是展示它出问题的地方。

是否可以编写CSS来保持外观，但支持可变高度？

css css-selectors
1个回答
1
投票

请运行并查看代码段以获取所需的结果。

.label {
  position: relative;
  display: inline-block;
  padding: .5rem .75rem;
  line-height: 1rem;
  color: white;
  background-color: darkred;
  box-sizing: border-box;
}
/*
.label:after {
  content: ' ';
  position: absolute;
  top: 0;
  right: -.5rem;
  border-top: 1rem solid transparent;
  border-left: .5rem solid darkred;
  border-bottom: 1rem solid transparent;
  box-sizing: border-box;
}
*/
.label:before,
.label:after {
  width: 1rem;
  height: 50%;
  position: absolute;
  left: 100%;
  content: "";
}

.label:before {
  top: 0px;
  background: -webkit-linear-gradient(left bottom, darkred 50%, rgba(0, 0, 0, 0) 50%);
  background: linear-gradient(to right top, darkred 50%, rgba(0, 0, 0, 0) 50%);
}

.label:after {
  top: 50%;
  background: -webkit-linear-gradient(left top, darkred 50%, rgba(0, 0, 0, 0) 50%);
  background: linear-gradient(to right bottom, darkred 50%, rgba(0, 0, 0, 0) 50%);
}
<span class="label">
  BREAKING NEWS
</span>

<br><br>

<span class="label">
  BREAKING <br> 
  NEWS
</span>

<br><br>

<span class="label">
  BREAKING <br> 
  NEWS <br> 
  BREAKING
</span>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.