CODEWITHSUNDEEP
htmlcsscss-shapes
CodeTrooper
CodeTrooper

Reputation: 1888

Image not getting inside CSS shape

I'm doing a pentagon with css shapes and for some reason, the image is not staying inside. I've tried many things such a position absolute and moving the image inside the shape with the top and left properties but it does not work. It stays outside. Any ideas why this is happening?

Here's the css for my pentagon: 

.pentagon {
    margin-top: 200px;
    position: relative;
    width: 250px;
    border-width: 130px 50px 0;
    border-style: solid;
    border-color: rgba(191, 191, 191, 0.6) transparent;
}
.pentagon:before {
    content: "";
    position: absolute;
    height: 0;
    width: 0;
    top: -255px;
    left: -50px;
    border-width: 0 175px 125px;
    border-style: solid;
    border-color: transparent transparent rgba(191, 191, 191, 0.6);
}

And here's the CSS for the image: 

.logo-sponsor{
    z-index: 1000;
    position: relative;
    width: 200px; 
    height: auto;
    margin: 0 auto;
    display: block;
}

Here's a fiddle with the demo.

Here's how it currently looks:

enter image description here

Upvotes: 0

Views: 278

Answers (1)

Denys Séguret
Denys Séguret

Reputation: 382150

This is easy to change :

.logo-sponsor{
    z-index: 1000;
    position: absolute;
    top: -200px;
    left: 20px;

demo

But seriously, it's a bad idea to try to compose a logo like this : it's so much easier, and more powerful, to use an image. You could also use a character for this shape : ⬟

Upvotes: 1

Related Questions