Home/ Questions/Q 9162803
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-17T14:17:59+00:00

I’m using CSS3 borders to create shapes that users can then drag images onto

  • 0

I’m using CSS3 borders to create shapes that users can then drag images onto it.

The problem is, I’d like the image to take the shape of the div.

Can this be done with CSS or would I need to do this using jQuery?

Thanks

EDIT:

 <div class="my-div">
     <img class="div-image" src="image.jpg" />
 </div>

 border-left: 300px solid red;
 border-right: 200px solid transparent;
 border-top: 30px solid transparent;
 border-bottom: 25px solid transparent;

This creates a box with slanted sides in the shape i want the image to be

Here is an example: jsfiddle

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The real problem here is using CSS borders to hack shapes.

    If you want to do what you’re asking, you need to be using a better solution — ie create shapes using real graphics (probably SVG or Canvas) rather than faking it in CSS. CSS shapes are very limited, and only really useful for showing off the fact the CSS can do them at all. They’re not really much use in practice.

    My suggestion would be SVG. SVG is a vector graphics format that can be embedded in an HTML page, and would be a far better solution to your question. You can easily create an element of any shape you want, and fill it with an image. The only down-side of SVG is that it isn’t supported by older browsers (IE8, for example), but this can easily be worked around, as IE8 supports an alternative format called VML. Several Javascript libraries exist that will work with either SVG or VML

    I recommend you look up a library called Raphael. See the examples on their site for some of the things you can do. It’s all really pretty easy. You will need to learn some new syntax, but once you’ve got the basics, you’ll be amazed at what you can achieve.

    [EDIT]
    I’ve just seen your edit to the question with the JSFiddle example of what you’re trying to do.

    The reason the JSFiddle doesn’t work is because the shape you’re seeing with the grey background is made up of the borders. Box borders are displayed on top of box content. In your case, the box borders take up the entirety of the box itself,so your grey borders are all you get to see. The image is loaded but hidden behind the box. I’ll repeat what I said originally: CSS Shapes are not a good solution for anything other than simple hacks. Use SVG if you want a robust solution.

    • 0