如何在行内的div上添加带有三角形的边框底部答案

【问题标题】：How to add border-bottom with a triangle on a div which is inside a row如何在行内的div上添加带有三角形的边框底部
【发布时间】：2018-05-25 05:10:09
【问题描述】：

好的。我有一个 Angular2 应用程序。我使用了一个名为 flex-layout 的角度组件（它让我可以通过指令使用 flexbox，仅此而已）。然后，我有一个 class="row" 的 div 和其中的动态 div 数量。每个动态 div 里面都有一张图片。

我需要将其中一个 div 标记为选中，然后向其中添加一个特定的类。该类必须放置一个边框底部和背景颜色（已经这样做了），但我需要在所选 div 的边框底部中间添加一个小三角形。

Work already done

Fail when selecting another div

正如你在上面的图片中看到的，我设法把那个三角形放在所有行的中间（不管我选择了什么 div）

但是，当我更改选定的 div 时，三角形根本不会移动。它总是停留在行的中心，而我需要三角形位于所选 div 的中心。

changeSelectedBrand(brandId: number) {
    this.selectedBrand = brandId;
  }

div.image-row {
    height: 90px;
    max-height: 90px;
    width: 100%;
    max-width: 100%;
    margin: 0px;
    padding: 20px;
    background-color: #EEEEEE;
  }

  .div-image-row-selected {
    background-color: #DDDDDD !important;
    border-bottom: 3px solid mat-color($primary,400);
  }

  .div-image-row-selected:after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: 0;
    height: 0;
    border-top: solid 10px mat-color($primary,400);
    border-left: solid 10px transparent;
    border-right: solid 10px transparent;
  }
  
  div.image-row > img {
    height: 65px;
  }

<div fxLayout="row">
                      <div fxFlex="100%" fxLayoutAlign="center center" class="image-row" *ngFor="let brand of brands" [ngClass]="{'div-image-row-selected': brand.id === selectedBrand}" (click)="changeSelectedBrand(brand.id)">
                        <img src="{{brand.url}}" />
                      </div>
                    </div>

sn-p 不起作用，我知道...只是为了向您展示现在的工作方式。

所以，重复这个问题：我怎样才能使那个三角形移动到选定 div 的底部边框的中心？

谢谢

【问题讨论】：

请提供一个工作示例。没有办法像这样调试你的代码。

标签： html angular css typescript flexbox

【解决方案1】：

为div.image-row 放置一个位置相对包装器，然后用所需的左侧更新三角形样式(.div-image-row-selected:after)。

div.image-row {
    height: 90px;
    max-height: 90px;
    width: 100px;
    max-width: 100%;
    margin: 0px;
    padding: 20px;
    background-color: #EEEEEE;

    position: relative;
  }

.div-image-row-selected:after {
    content: '';
    position: absolute;
    top: 100%;
    left: calc(50% - 10px);
    right: 0;
    width: 0;
    height: 0;
    border-top: solid 10px #ff0000;
    border-left: solid 10px transparent;
    border-right: solid 10px transparent;
  }

【讨论】：