13

Respected stackoverflowers,

How do i create a triangle element with the background pattern?

For example i need the div like this :

enter image description here

But my state is like this :

enter image description here

All examples with triangle elements use borders which cant have an img in that ....

This is my subsection class which needs the coolarrow:

<div class="subsection"><span>Ryan Gosling, Mr Landlord</span></div>

.subsection {
  .box-shadow (0, -1px, 1px, 0, rgba(0, 0, 0, 0.3));
  background: url('/assets/pattern-lorem.png'); // The inner part of the slider have the pattern
  display: block;
  clear: both;
  float: left;
  width: 100%;
  padding-top: 15px;
  padding-bottom: 15px;
  display: none;
}
.subsection {
    position:relative;
}
.subsection:before {
    content:'';
    position:absolute;
    top:0;
    left:0;
    height:20px;
    width:0;
    border-left:20px solid white;
    border-bottom:16px solid transparent;
}
.subsection:after {
    content:'';
    position:absolute;
    top:36px;
    left:0;
    bottom:0;
    width:0;
    border-left:20px solid white;
    border-top:16px solid transparent;
}

And im getting :

enter image description here

Which is fine ...how can i bring the arrow on the top in the required form ? ... and overlaying the cases div ? ... Thanks.

Improve this question
3
  • I think this question answered a similar problem stackoverflow.com/questions/11379085/… Commented Jul 17, 2013 at 13:42
  • No its not a duplicate .... need to have an image with the shape BUT with the image background ... not with the color input from a border .... Commented Jul 17, 2013 at 14:12
  • would you consider using SVG rather than CSS for this? It might be easier. Commented Jul 17, 2013 at 15:23

3 Answers 3

Reset to default
4

If you don't care for cross browser compatibility, you can use a pseudo-element that you rotate by 45 degrees and attach the styles to it. The only thing you need additionally would be the background, rotated (back) by 45deg to attach to the pseudo element:

div.coolarrow:before {
    content: '';
    position: absolute;
    z-index: -1;
    top: -24.7px;
    left: 10px;
    background-color: #bada55;
    width: 50px;
    height: 50px;

    background: url(url/to/your/45deg/rotated/background.gif);

    box-shadow: inset 0 0 10px #000000;
    transform: rotate(45deg); 
}

Here's a short fiddle to illustrate (without background):
Fiddle

To work this out for other cases but 90degree arrows, you need to skew the rect additionaly. And I don't really know what then happens with the background image...

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Thanks ...please see my update .... i got some idea from yours ....
1

Put the image as a background for a div, and just put negative values for the margin to make it overlay on the bar. Example (although estimated, in no way do I claim this to work) would be margin-left: -20px; margin-top: -20px; and have it after the line.

Alternatively go with @Py's answer, and you can use this CSS for the arrow, and do the same negative margins to make it line up.

#triangle-up { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red; margin-left: -20px; margin-top: -20px; }
Improve this answer

5 Comments

To bring it to the top add a margin-top: -10px (change the 10 to see what suits your needs) to the CSS class for the arrow div.
There is no arrow class anymore .... using a pseudo element of before and after ... i have posted the entire css ... u can see please ... thanks
Adding margin-top: -10px to after just increaes the side ...not the location of the arroe ...its still on the left .. dosent orient to the top ...
The code I posted as the answer will make an arrow pointing up.
Yes that works but it cant accept a pattern as it is using a solid color ... anyway to replace that red with the pattern ? ... your solution would be really elegant if if it solves that use case :) ...
1

go on http://apps.eky.hk/css-triangle-generator/ and generate it :D

OR

#triangle {
   width: 0; 
   height: 0; 
   border-bottom: 120px solid green; 
   border-left: 60px solid transparent; 
   border-right: 60px solid transparent; 
}
Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.