CSS triangle with background image

Question

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.

I think this question answered a similar problem http://stackoverflow.com/questions/11379085/make-a-css-triangle-with-transparent-background-on-a-div-with-white-bg-image?rq=1 — matthiasgh, Jul 17 '13 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 '13 at 14:12
would you consider using SVG rather than CSS for this? It might be easier. — Spudley, Jul 17 '13 at 15:23

nirazul · Accepted Answer · 2017-01-15T18:01:41.637

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

Thanks ...please see my update .... i got some idea from yours .... — SkyKOG, Jul 17 '13 at 15:19

score 1 · Answer 2 · answered Jul 17 '13 at 14:36

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; }

answered Jul 17 '13 at 14:36

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. – Jul 17 '13 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 '13 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 '13 at 15:34
The code I posted as the answer will make an arrow pointing up. – Jul 17 '13 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 '13 at 15:45

score 1 · Answer 3 · answered Jul 17 '13 at 14:49

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; 
}

answered Jul 17 '13 at 14:49

Žarko Selak

1,073
12
19

CSS triangle with background image

3 Answers3

Linked

Related