Photoshop Question posted in
The official user guide can be found here.

CSS triangle over and IMG – Photoshop

I’m trying to do the triangle part that you see over the top of this image:

Example of a triangle on top of an image

I tried a few methods without success.

I need the triangle to be reponsive if the image changes size.
And I don’t want the container div to expand because of the triangle.
But I can’t fix the div height because it changes if the image size changes.
I don’t want to do the triangle in photoshop and export the image because when you click on it you will see the triangle too.

Any idea how to achieve this the right way?

Here is what I tried:

http://jsfiddle.net/37uufbg3/

.arrow-down {
    width: 0; 
    height: 0; 
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;   
    border-top: 20px solid #f00;
}
.image{
    width:100%;
}

<div class="imageTriangle">
    <img src="image.jpg">
    <div class="arrow-down"></div>
</div>
Tags:

2

Answers


  1. 0

    Try this

    .arrow-down {
  position:absolute;
  top:0;
  left:50%;
  width:0; 
  height:0; 
  border-left:20px solid transparent;
  border-right:20px solid transparent;   
  border-top:20px solid black;
}
.image{
  position:absolute;
  top:0;
  left:0;
  width:100%;
}
img{
  width:100%;
}
    <div class="image">
   <img src="http://lorempixel.com/400/200/">
   <div class="arrow-down"></div>
</div>

    Add a comment if I need to clarify further.

    Login or Signup to reply.
  2. 0

    use pseudo element :after for image

    demo – http://jsfiddle.net/victor_007/dvv7bg76/

    this example will not work on ie8

    .image:after {
    content:'';
    width: 0; 
    height: 0; 
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;   
    border-top: 20px solid #f00;
    position:absolute;
    left:50%;
    top:0;
    transform:translatex(-50%); /** making it horizontally center **/
}

    or for older browsers you can also use this

    demo – http://jsfiddle.net/victor_007/dvv7bg76/1/

    this will work on ie8

    .image:after {
    content:'';
    width: 0;
    height: 0;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-top: 20px solid #f00;
    position:absolute;
    left:50%;
    top:0;
    margin-left:-20px; /** for older browsers **/
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search