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.

3
  • I think this question answered a similar problem stackoverflow.com/questions/11379085/…
    – matthiasgh
    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 ....
    – SkyKOG
    Jul 17, 2013 at 14:12
  • would you consider using SVG rather than CSS for this? It might be easier.
    – Spudley
    Jul 17, 2013 at 15:23

3 Answers 3

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...

1
  • Thanks ...please see my update .... i got some idea from yours ....
    – SkyKOG
    Jul 17, 2013 at 15:19
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; } 
5
  • 1
    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.
    – user2589557
    Jul 17, 2013 at 15:20
  • 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
    – SkyKOG
    Jul 17, 2013 at 15:33
  • 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 ...
    – SkyKOG
    Jul 17, 2013 at 15:34
  • The code I posted as the answer will make an arrow pointing up.
    – user2589557
    Jul 17, 2013 at 15:36
  • 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 :) ...
    – SkyKOG
    Jul 17, 2013 at 15:45
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; 
}

Not the answer you're looking for? Browse other questions tagged or ask your own question.