How to make a custom clickable shape with CSS to cover the exact needed area?


Tags: html,css,css3,css-transforms,css-shapes

Problem :

I have to implement custom clickable area for my image in non standard shape (only for visible part of image). The shape is some part of the roof. I want to be able to do the click action only when I will hover over the shape.

Please see my example here in FIDDLE and see what I am doing wrong and how can it be done in better way? I have a problem with selection of transform parameters and with locating the clickable area just under the shape. How to do it correctly and to have an exact cover for needed shape?

Custom shape:

enter image description here

Example:

<div class="image">
  <div class="image_roof_left">
    <a class="link_roof_left" href="http://creation.cal24.pl/opencart/index.php?route=product/product&amp;product_id=50"></a>
    <img src="http://creation.cal24.pl/opencart/image/data/poc/dach_l1.png">
  </div>
</div>

div.image_roof_left {
    border: 1px solid;
    left: 120px;
    top: 10px;
    position: absolute;
    perspective: 150px;
    perspective-origin: 5% 0;
}
a.link_roof_left {
    background-color: rgba(0, 0, 0, 0.1);
    border: 1px solid;
    padding: 50px;
    position: absolute;
    transform: rotateX(82deg) rotateY(-19deg) rotateZ(-6deg) skewX(-63deg) skewY(2deg);
}


Solution :

As jme11 suggested, its better if you use an image map, as the sides of this shape are straight lines.

Open the image in an image editor to find out the coords.

Snippet :

<img src="http://creation.cal24.pl/opencart/image/data/poc/dach_l1.png" usemap="#map">
<map name="map">
  <area shape="poly" coords="0,164,104,132,252,8,252,0,0,164" href="example.com" />
</map>


    CSS Howto..

    Css styling without !important - how to do this?

    How to make navigation bar scroll with the page?

    CSS: how to place controls at both extrems of a cell table

    How to remove line break after DIV in CSS

    How to change the background color of an input field when text is entered?

    how to add css for div tag

    How do I get PHPStorm to use the correct path for CSS?

    how to trim css code to just one line [closed]

    CSS: how to address Samsung Android browser?

    how to specify a different image in css depending if the user visits on a desktop or a mobile browser

    How do I hide text that is not wrapped in

    or ?

    How to apply asynchronously fetched CSS into view

    How to align text differently inside a single inline element with CSS?

    How can I separate and make a menu with these links in CSS without using unordered lists [closed]

    how to set up responsive columns with pure CSS?

    How to force inline-block wrap to new line using CSS or jQuery?

    How do I change the last textual node child in JavaScript

    How to modify the layout of jQuery UI autocomplete combobox

    How to avoid with css when background of the second line covers the letters of the first line?

    How to set opacity for background images using css?

    Show/Hide images based on tab selection

    HSS Liquid Layout Issue: how to fill the entire browser

    How can i get bootstrap to alter page CSS instead of lay dormant?

    How can I get the name of a page via Laravel Blade

    show/hide will not load

    CSS: How to align differently sized images in a line?

    How to wrap text in table cell without wrapping child elements

    How to keep sub div from considering height of its cousin?

    How to rotate a div

    How to generate width CSS from JavaScript / C#