Question

我有这个小提琴：

我的实际代码如下：

 <section class="tile-column large-8 columns min-height" tile-column>
     <h1 class="column-title">Order lines</h1>

     <div class="loading black" ng-show="controller.order.loading"></div>

     <div class="alert alert-box" ng-show="!controller.order.loading && !controller.order.data">
         No records have been found that match your search.
         <a href="#" class="close">&times;</a>
     </div>

     <div class="tile large box-shadow" ng-repeat="line in controller.order.data.lines" coloured-tile>
         <a class="action-button">
            <div class="triangle">
                <div class="action-tick">

                </div>
             </div>
         </a>

         <div class="text">
             <p>
                 <strong>{{ line.id }}</strong> {{ line.referenceNumber | limitTo: 7 }}
                 <span class="pull-right"><strong>{{ line.stockQuantity }} M</strong> {{ line.unitOfMeasure === 0 && line.type === 0 ? 'Cut' : 'Roll' }}</span><br />
                 <strong>{{ line.sku }}</strong> <span ng-show="line.colourMatchId">Matched to {{ line.colourMatchId }}</span><br />
                 <strong>{{ line.currency.code }}{{ line.currency.lineValue }}</strong> {{ line.currency.code }}{{ line.currency.unitPrice }} M<sup>2</sup><br />
                 <strong>{{ line.dates.delivery | date : 'mediumDate' }}</strong> For {{ line.forDelivery ? 'Delivery' : 'Collection' }}
             </p>
         </div>
     </div>
 </section>

我要做的是创建一个位于磁贴顶部的链接，并且可以选择。但我希望边框和三角形可以点击。目前，唯一可点击的是链接的边框。如何使三角形可点击？

此外，在我的项目中，边框位于图块内部且非常合适，因此在小提琴上有一些原因会截断底部边框。不知道为什么。

Answer 1

所以你希望边框和三角形可以点击而不是内容。

你可以通过添加一个额外的元素并将其置于上方（具有浅蓝色边框）但位于三角形（位于内）来实现此目的锚）

FIDDLE

.tile-content {
  width: 190px;
  height: 90px;
  position: absolute;
  z-index: 1;
  background-color: blue;
  margin: 5px 0 0 5px;
}
.action-button {
  width: 200px;
  height: 100px;
  display: block;
  border-color: rgb(0, 0, 255);
  border-color: rgba(0, 0, 255, 0.5);
  border-style: solid;
  border-width: 5px;
  position: relative;
  box-sizing: border-box;
}
.action-button .triangle .action-tick {
  margin-left: -25px;
  margin-top: 25px;
  font: normal normal normal 25px/1 FontAwesome;
  color: white;
}
.action-button .triangle .action-tick:before {
  content: "\f00c";
}
.action-button .triangle {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 50px 50px;
  border-color: transparent transparent #ffffff transparent;
  border-color: transparent transparent rgba(255, 255, 255, 0.5) transparent;
  z-index: 2;
}

<div class="tile">
  <div class="tile-content"></div>
  <a class="action-button" href="#">
    <div class="triangle">
      <div class="action-tick">
      </div>
    </div>
  </a>
</div>

带有边框和三角形点击区域的CSS锚链接

1 个答案:

FIDDLE