时间戳

首页 > 解决方案 > 这种箭头样式可以通过可变高度来实现吗？

css - 这种箭头样式可以通过可变高度来实现吗？

问题描述

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

.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 编写为仍然具有该外观，但支持可变高度？

标签： csscss-selectors

解决方案

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

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

推荐阅读