CSS anchor link with borders and triangle click area

Question

I have this fiddle:

http://jsfiddle.net/6953ugj4/

My actual code looks like this:

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

What I am trying to do is create a link that sits over the top of the tile and is selectable. But I want the border and the triangle to be click-able. At the moment, the only thing that is click-able is the border of the link. How can I make the triangle click-able?

Also, in my project the border is inside the tile and fits perfectly, so some reason on the fiddle it truncates the bottom border. Not sure why.

Answer 1

So you want the border and the triangle to be clickable but not the content.

You can do this by adding an additional element and placing it above the the anchor (which has the light-blue border) but below the triangle (which is within the anchor)

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>