Css 将三角形箭头添加到使用ngb datepicker创建的日期范围内的开始日期和结束日期

我有一个ngb datepicker日期范围/日历元素，允许选择日期范围

“从”和“到”日期具有深蓝色背景，使用此CSS选择器：

.custom day.range

。我希望“开始”日期有一个三角形箭头指向前方（右），而“结束”日期有一个三角形箭头指向后方（左）。理想情况下，这两个箭头将附着在所选框的各自侧面，并与它们旁边的日期重叠（但不与白色文本重叠）

下面是我想做的一个小模型（为我糟糕的艺术技巧道歉）：

以下是我在Stackblitz中的所有代码（我在实际日历下面添加了两个箭头元素，也许这会有所帮助）：

我尝试在之后使用

：：添加一个三角形元素，但没有成功

如果不是角度，我只需要在两个日期中添加一个子元素和三角形。。。但我对这个框架还不是很熟悉——我还在学习

模板：

所以我在想，也许这可以通过CSS来实现，或者可以通过将div与
.arrow right
和
.arrow left
动态地附加到开始日期和结束日期元素来实现。。。但我试过了，但还是失败了，但说到角度，我还是个初学者

任何帮助都将不胜感激！谢谢。
我不知道您想如何将css应用于元素，但您确实可以这样做

  [class.firstDate]="isInsideFirst(date)"
  [class.lastDate]="isInsideLast(date)"

.firstDate::after{
     content: '\25ba';
    padding-left: -0.5em;
    background-color: rgb(2, 117, 216);       
    padding: 0.1rem 0.25rem;
    position: absolute;
}


.lastDate::before{
     content: '\25c4';        
    background-color: rgb(2, 117, 216);        
    padding: 0.185rem 0.25rem;
    position: absolute;
}

创建两个将css应用于第一个和最后一个元素的函数

  isInsideFirst(date: NgbDate) {
    return date.equals(this.fromDate) ;

  }

  isInsideLast(date: NgbDate) {
    return date.equals(this.toDate);
  }

现在，已经应用了第一个和最后一个元素类，因此可以使用css绘制箭头

像这样的

  [class.firstDate]="isInsideFirst(date)"
  [class.lastDate]="isInsideLast(date)"

.firstDate::after{
     content: '\25ba';
    padding-left: -0.5em;
    background-color: rgb(2, 117, 216);       
    padding: 0.1rem 0.25rem;
    position: absolute;
}


.lastDate::before{
     content: '\25c4';        
    background-color: rgb(2, 117, 216);        
    padding: 0.185rem 0.25rem;
    position: absolute;
}

本教程将帮助您使用纯css创建箭头，感谢您的链接，但是创建箭头并不完全是我的问题，而是将箭头嵌入引导角度控件。非常有用。非常感谢你！