Is there a way to make transparent border for image with the shape of the image?

Question

I'm trying to make a transparent border for the logo image as the picture below

I'm trying to not use two images, one for the logo and the other for the transparent logo, and to be responsive. I googled it and i can't find a good answer please any help and many thanks in advance

can you please share actual image of logo so that we can figure out what changes you are looking for — Sandeep Garg, Jan 10 '17 at 08:51
Simple solution is just convert the logo to a transparent png file — claudios, Jan 10 '17 at 08:51

score 0 · Answer 1 · answered Jan 10 '17 at 08:54

You could use CSS Masking and Clipping. Specifically the property of interest is clip-path.

The clip-path property can be applied to all HTML elements, SVG graphic elements and SVG container elements.

More information and examples here: https://www.html5rocks.com/en/tutorials/masking/adobe/

img {
  -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

<img src="http://lorempixel.com/400/200/" alt="Smiley face" height="400" width="200">

Alternative as @Justinas pointed out, you should go for SVG.

score 0 · Answer 2 · answered Jan 10 '17 at 08:55

0

May be a simple fix, but if the container is a fixed width, you could use a transparent png for the header section of the container.

You could then use margin-top: -Xpx; to set the positioning.

answered Jan 10 '17 at 08:55

Luke C

172
2
13

score 0 · Answer 3 · edited May 23 '17 at 11:53

What you could do is create a black silhouette out of the png image through JavaScript (on top of a canvas), then place the output underneath the image.

JavaScript:

window.onload = function() {
    var canvas = document.getElementById("canvas");
    var context = canvas.getContext("2d");
    var image = document.getElementById("imgSource");
    context.drawImage(image, 0, 0);

    var imgd = context.getImageData(0, 0, 300, 300); // width and height value
    var pix = imgd.data;
    var blackpixel = 21;
    for (var i = 0, n = pix.length; i < n; i += 4) {
        if (i > 3) {
            if ((Math.abs(pix[i-3] - pix[i]) > 10) &&
                (Math.abs(pix[i-2] - pix[i+1]) > 10) &&
                (Math.abs(pix[i-1] - pix[i+2]) > 10)) {
                pix[i] = blackpixel;  
                pix[i+1] = blackpixel;  
                pix[i+2] = blackpixel;
            }
        } else {
            if (pix[i] < 250 && pix[i+1] < 250 && pix[i+2] < 250) {
                pix[i] = blackpixel;  
                pix[i+1] = blackpixel;  
                pix[i+2] = blackpixel;
            }
        }
    }

    context.putImageData(imgd, 0, 0);       
}

HTML:

<img id="imgSource" src="yourimg.png">
<canvas id="canvas" width="300" height="300"></canvas>

However, as others have said, you should probably just do this with an SVG. Or create the border yourself within Photoshop, as this solution is very limited with what it can do.

Credit to this post, for the answer.

This partially answer the question as it does not content the shape of the image. — GibboK, Jan 10 '17 at 08:56

score -1 · Answer 4 · answered Jan 10 '17 at 08:52

-1

You can use SVG image for that.

If ordinary image, than your image element will always be rectangle and you can't set border that matches some shape

answered Jan 10 '17 at 08:52

Justinas

41,402
5
66
96

3

Don't you think this should be a comment, not an answer? – Abhishek Pandey Jan 10 '17 at 09:07

Is there a way to make transparent border for image with the shape of the image?

4 Answers4