2

What I want to achieve is located here: http://www.ppp-templates.de/tilability/ ..You see the left and right triangles near the slider, where the arrows are supposed to be...

right now I have that div set up here, with a white background http://teothemes.com/wp/. On that website a background image was used, but I want to do it via CSS

Something related is here, for the footer triangle: Make a CSS triangle with transparent background on a div with white bg image?

I tried to do the same thing, but it didn't work..

Any help is greatly appreciated.

Community
  • 1
  • 1
FinalDestiny
  • 1,148
  • 3
  • 15
  • 26

3 Answers3

2

The first thing you can do is create two squares with background same as the background of the website and then rotate them 45deg using transform: rotate(45deg) with vendor prefixes. Then just set the content div's overflow to hidden.

Something like this that I just created: http://cssdeck.com/labs/hggee4eg

Kushagra
  • 536
  • 2
  • 12
1

Explaining the process here proved to be quite difficult, so I created a fiddle which goes through each of the steps needed to achieve this, each with a small legend.

Here's the fiddle - http://jsfiddle.net/NXmge/3/

EDIT - I misunderstood the question. Here's the fiddle with the solution to the actual problem: http://jsfiddle.net/joplomacedo/UJyAY/

The previous fiddle still remains useful as it helps understand what I did with on the second fiddle. I'll also update my answer as soon as I can too directly include a general explanation of what I did.

João Paulo Macedo
  • 15,297
  • 4
  • 31
  • 41
  • Would you also include your answer *in your answer*? That way, when JS Fiddle next falls over, your answer remains useful. External sites are good for demonstration, but the answer itself should be self-contained to protect against link-rot. – David Thomas Jul 08 '12 at 13:40
  • Yes, I usually do that. Was in hurry. Give me 5 minutes and I'll update my answer. – João Paulo Macedo Jul 08 '12 at 13:41
  • Thanks for the reply, but I think you misunderstood me :( the footer is just fine, I'm looking to achieve the same result for the slider, but this time in the left and right sections of the homepage – FinalDestiny Jul 08 '12 at 15:55
  • Unfortunately I'm out of time right now. Later today, if it hasn't been answered already, I'll come back to this. Sorry for having misread the question. – João Paulo Macedo Jul 08 '12 at 16:02
  • I've updated my answer with the solution to your actual problem. – João Paulo Macedo Jul 08 '12 at 16:40
  • sorry for the late reply...but.. there's just a div with just some text :-) its not cut at the left/ right – FinalDestiny Jul 10 '12 at 18:17
0

Depending on what sort of cross-browser compatibility you are hopeing to achieve, there are a couple of different CSS3-type options that will allow you to rotate elements by 45 degrees.

However, the example you linked to just uses one large background image with the graphics already in-place: there's nothing achieve with CSS there at all apart from setting it as the container background.

johnkavanagh
  • 4,614
  • 2
  • 25
  • 37