CODEWITHSUNDEEP
javascripthtml
Chris
Chris

Reputation: 179

Click zone for a non rectangle object

Let's say I have a few triangles positioned like these: enter image description here

Each triangle is a DIV and positioned with CSS. And now I need to change the clickable zone of each DIV because the DIVs are rectangles but I display triangles. How is that possible? Is it? :)

The full HTML is created by vanilla JS and futhermore I want to add a click event for each triangle.

<div id="Row_1" class="row">
    <div id="Field_1_1" class="field">
        <div class="triangle"></div>
    </div>
    <div id="Field_1_2" class="field">
        <div class="triangle"></div>
    </div>
</div>

Upvotes: 1

Views: 649

Answers (4)

Alynva
Alynva

Reputation: 558

You can use clip-path:

clip-path: polygon(50% 0, 100% 100%, 0 100%);

Source: https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path

Upvotes: 0

Kr&#248;sh
Kr&#248;sh

Reputation: 61

Doing this in SVG will allow per-pixel click detection, that just wouldn't be possible with divs.

Positioning the triangles can be done directly using their points, but it's often easier to have each "up" and "down" triangle use the same points, and put it inside a transform to make positioning them easier.

JSFiddle: https://jsfiddle.net/moertx29/

HTML:

<svg>
  <g transform="translate(75 0)">
    <polygon class="up" points="75,0 0,150 150,150" onclick="alert('1')" />
  </g>
  <g transform="translate(0 150)">
    <polygon class="up" points="75,0 0,150 150,150" onclick="alert('2')" />
  </g>
  <g transform="translate(75 150)">
    <polygon class="down" points="0,0 150,0 75,150" onclick="alert('3')" />
  </g>
  <g transform="translate(150 150)">
    <polygon class="up" points="75,0 0,150 150,150" onclick="alert('4')" />
  </g>
</svg>

CSS:

svg {
  height:500px;
  width:500px;
}

polygon {
  stroke:purple;
  stroke-width:1;
  cursor:pointer;
}

polygon.down {
  fill:red;
}

polygon.up {
  fill:yellow;
}

Upvotes: 1

Kr&#248;sh
Kr&#248;sh

Reputation: 61

Here is how you can do it:

Here is a Fiddle: https://jsfiddle.net/w65nkp94/1/

Here is the code:

HTML:

<body>
<a href=""><div class="triangleUp"></div></a>
<a href=""><div class="triangleDown"></div></a>
<a href=""><div class="triangleUp"></div></a>
<a href=""><div class="triangleDown"></div></a>
</body>

CSS:

body {
  font-size:0;
  margin:50px;
}

.triangleUp {
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
  border-bottom: 50px solid #555;
  position:relative;
  display:inline-block;
  margin-left:-25px;
}

.triangleDown {
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
  border-top: 50px solid red;
  position:relative;
  display:inline-block;
  margin-left:-25px;
}

If you want to add a javascript function, remove the < a> tags and add a "onclick" event to the divs, like this:

<body>
<div class="triangleUp" onclick="myFunction()"></div>
<div class="triangleDown" onclick="myFunction2()"></div>
<div class="triangleUp" onclick="myFunction3()"></div>
<div class="triangleDown" onclick="myFunction4()"></div>
</body>

Upvotes: 0

FTWinston
FTWinston

Reputation: 1066

Divs will always be rectangles, although you can give them a border-radius to produce circles, semicircles, rounded rectangles, etc.

If you really want triangle-level clicking I'd recommend using svg instead of styling divs. With svg you can detect clicks on individual shapes with per-pixel accuracy.

Upvotes: 2

Related Questions