Triangular Link Area

Click under the links under the transparent area (triangular or polygon link)

You could use pointer-events. Add to the SVG tag:

pointer-events:none

and to polygon tag:

pointer-events:fill

See the following example in http://jsfiddle.net/poselab/yPWxQ/

More information in:

• https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events
• http://www.w3.org/TR/pointerevents/

CSS anchor link with borders and triangle click area

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>

navigate on triangle click

This is a repeating question:
Triangular link area

Insert the link into the div

Use skew or rotate:
http://jsfiddle.net/0a8aq5ve/

html,body {
    height:100%;
    margin:0;
    padding:0;
}
div {
    height:50%;
    border:10px solid lightgrey;
    position:relative;
    overflow:hidden;
}
a {
    position:absolute;
    bottom:0;
    width:100%; height:20%;
    background:red;
    -webkit-transform-origin: 100% 0;
    transform-origin: 100% 0;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

How to make a triangular shaped link without using image map?

YES it is possible see the demo

You need this html:

<div id="link">   // Wrapper
    <div id="square1"></div>   // rotated square to cover the extra are 
    <a id="triangle-up" href="#"></a>  // actual link 
    <div id="square2"></div>  // rotated square to cover the extra are 
  </div> 

CSS:

#link {
   width:110px;
   height:100px; 
   overflow:hidden;
   margin:auto; 
   position:relative;
}

#triangle-up {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid red;
    position:absolute;
    top:0px;
    left:10px;
}

#square1 {
    z-index: 10;
    position: absolute;
    display: inline-block;
    width: 50px;
    height: 110px;
   // background: blue;
    top: -16px;
    left: -12px;
    transform: rotate(26deg);
  -ms-transform: rotate(26deg);/* IE 9 */
  -webkit-transform: rotate(26deg); /* Safari and Chrome */
  -o-transform: rotate(26deg); /* Opera */
  -moz-transform: rotate(26deg); /* Firefox */

}
#square2 {
   z-index: 10;
  position: absolute;
  display: inline-block;
  width: 50px;
  height: 110px;
 // background: blue;
  top: -16px;
  left: 82px;
  transform: rotate(-26deg);
  -ms-transform: rotate(-26deg);/* IE 9 */
  -webkit-transform: rotate(-26deg); /* Safari and Chrome */
  -o-transform: rotate(-26deg); /* Opera */
  -moz-transform: rotate(-26deg); /* Firefox */
}

CSS Triangle Under Link On Hover (WITHOUT UL/LI/SPAN)?

You probably do want to use display:block;, however, you need to position the element so that it is below the line.

.mainnav a:hover + .arrow {
    display: block;
    position: relative; /* you could also try 'absolute' here */
    top: -50px; /* this will be how far down you want the triangle */
}

Edit:

I created a JSFiddle to demonstrate. I had to add some CSS definitions so that the rest of it would show up like described.

For posterity, here are the relevant rules:

.mainnav a, .mainnav a:hover{ text-decoration:none;}
.mainnav a:hover:after {
    display: block;
    position:relative;
    width:100%;
    text-align:center;
    content : "\25B2";

    color:yellow;
}

.columns {float : left; margin:10px;}

content : "\25B2"; inserts the unicode ▲. This can be substituted of course with a background-image: url(...) or whatever you need it to be.

Edit 2:

See this version of the JSFiddle. Instead of putting the border on the a (which caused a weird ever-expanding width issue), I put it on the div which wraps the a and added margin and padding to that div, then gave the "arrow" a height: 0; so that the box would not expand on :hover.

Here is the complete solution:

.mainnav a {    font-family:"Quicksand", Verdana, sans-serif;    color: #8cc63f;    font-size: 1.75em;}.mainnav a:hover {    color: #c97932;}.arrow {    width: 0;    height: 0;    border-left: 10px solid transparent;    border-right: 10px solid transparent;    border-top: 10px solid #c97932;    margin: 25px auto;    display: none;}.mainnav a, .mainnav a:hover {    text-decoration:none;}.mainnav a:hover:after {    display: block;    position:relative;    top:5px;    width:100%;    height:0;    text-align:center;    content :"\25B2";    color:#c97932;}.columns {    float : left;    margin:0;    padding:5px 10px;    border-bottom:1px solid #f00;    overflow:visible;}

<nav class="mainnav">    <div>        <div class="columns"><a href="#">Work</a></div>        <div class="columns"><a href="#">About</a></div>        <div class="columns"><a href="#">Contact</a></div>        <div class="columns"><a href="#">Blog</a></div>    </div></nav>

Link with border and down triangle transparent

The shape given in question is a bit complex to achieve with full transparency because of the area cut by the arrow having to be transparent too. Because of this, the techniques that are generally used for creating such tool-tip like shapes cannot be used as-is here. However, there is a still a way to achieve it using CSS and it is as follows:

• Use the parent hgroup for the shape with borders on top, left and right and add border-radius. Don't add any border to the bottom because then cutting the space for the arrow would be tough.
• Use two pseudo elements (:before and :after) which have the same height as the parent but lesser width such that they produce a tiny gap when positioned absolutely with respect to parent. Add border-bottom alone to these pseudo-elements.
• Add a pseudo-element for the arrow on the arrow-down element (a) and create the arrow using rotate(45deg) transforms instead of using the border trick. The transform method is very helpful for creating transparent arrows. Position this arrow again absolutely with respect to the parent.
• As we are dealing with transforms, triangle shapes etc the position values need to be calculated based on Math theorems.

* {  box-sizing: border-box;}.container {  height: 300px;  width: 500px;  background: url(http://lorempixel.com/500/300/nature/2);  padding: 10px;}#subheader {  position: relative;  width: 400px;  height: auto;  border: 1px solid black;  border-bottom: none;  border-radius: 12px;  padding: 10px;}.arrow-down{  display: inline-block;}.arrow-down:after {  position: absolute;  content: '';  bottom: -10px;  /* half the height of the element */  left: 50px;  /* some aribitrary position */  height: 20px;  width: 20px;  transform: rotate(45deg);  transform-origin: 50% 50%;  /* rotate around center which is at 60px from left */  border-right: 1px solid black;  border-bottom: 1px solid black;}#subheader:after {  position: absolute;  content: '';  left: 74px;  /* center point of arrow + 1/2 of hypotenuse */  height: 100%;  width: calc(100% - 74px);  /* 100% - value of left */  bottom: 0px;  border-bottom: 1px solid black;  border-bottom-right-radius: inherit;  /* same border-radius as parent */}#subheader:before {  position: absolute;  content: '';  height: 100%;  width: 46px;  /* center point of arrow - 1/2 of hypotenuse */  left: 0px;  bottom: 0px;  border-bottom: 1px solid black;  border-bottom-left-radius: inherit;  /* same border-radius as parent */}

<div class='container'>  <hgroup id="subheader">    <h1>lorem ipsum</h1>    <h2>ipsum lorem</h2>    <a href="#" class="arrow-down">Read More</a>  </hgroup></div>

Displaying a link within a hyperlinked area

You can't nest links. My suggestion is to absolutely position the inner link over top of the outer area, somewhat like this:

<div class="container" style="position:relative">
<a href="...">
<span>RED Background and clickable</span><br/>
<span>RED Background and clickable</span><br/>
<span>RED Background and clickable</span><br/>
</a>
<a href="..." style="position:absolute;top:...px;left:...px">link 2</a>
</div>

calculate the area of a triangle in openmesh

The ((Q-P)%(R-P)).norm() * 0.5f part, as you probably know, is simply the area of the triangle spanned by Q, P, and R.

It appears that in this example a vertex weight proportional to the area of the surface assumed to "belong" to each vertex is computed. It is assumed that one third of the area of any incident triangle contributes to this particular vertex. (The other two thirds are considered to belong to the other two vertices incident to the respective triangle.) Hence your factor of (approximately) 1/3.

---

Related Topics