CODEWITHSUNDEEP
htmlcsslesscss-shapes
Viktor Sarström
Viktor Sarström

Reputation: 510

Creating a transparent arrow above image in CSS3

I'm trying to create an effect where I have a transparent arrow above any image in CSS3. See the following image.

Transparent arrow aboev image

Any ideas how to do this effect? Using LESS if that comes to any help.

Upvotes: 8

Views: 4622

Answers (2)

Martin Turjak
Martin Turjak

Reputation: 21214

To draw a transparent / inverted triangle in CSS3

you could use the CSS3 triangle technic, and make the inverted shape by combining the :before and :after pseudo objects, each to draw one part of the triangle.

You could do something like this:

.image {
    position:relative;
    height:200px;
    width:340px;
    background:orange;
}
.image:before, .image:after {
    content:'';
    position:absolute;
    width:0;
    border-left:20px solid white;
    left:0;
}
.image:before {
    top:0;
    height:20px;
    border-bottom:16px solid transparent;
}
.image:after {
    top:36px;
    bottom:0;
    border-top:16px solid transparent;
}

here is an illustrative jsfiddle

I just used a plane orange background for the example ... but you can change it to image, and you hopefully get what you wanted =)

Edit: and a more final result could then be something like this

Upvotes: 12

Matheno
Matheno

Reputation: 4142

I think you need something like this:

.arrow {
    bottom: -25px; 
    left: 30px; 
    width: 40px;
    height: 40px;
    position: absolute;
    overflow: hidden;
}

.arrow:after {
    content: ' ';
    display: block;
    background: red;
    width: 20px;
    height: 20px;
    transform: rotate(45deg);
    position: absolute;
    top: -19px;
    left: 3px;
    background: #999;
    border: 5px solid rgba(0, 0, 0, 0.2);
    background-clip: padding-box;
}

Upvotes: 2

Related Questions