Grow your CSS skills. Land your dream job.

background image + triangle shapes in CSS

  • # November 30, 2012 at 7:47 am

    Hi everybody !

    I was able to generate the shape I want using css (using borders), but I’d know like to map a background on it. I tried a few solutions but I didn’t found anything working in CSS.

    You’ll find an example there: http://codepen.io/jmorel/full/rIDAe
    Is there any way (other than using images for the shapes) that I can extend the stripes background to my .top and .bottom divs while preserving the shape ?

    I sure hope there is, I’m rubbish with Photoshop.

    # November 30, 2012 at 8:52 am

    I don’t know much about border-image, but here’s a good place to start:

    [http://css-tricks.com/understanding-border-image/](http://css-tricks.com/understanding-border-image/ “http://css-tricks.com/understanding-border-image/”)

    # November 30, 2012 at 9:04 am

    If you have created the shapes using borders then no. I feel that you might be able to do something with pseudo elements and gradients.

    Unfortunately I am on my phone at the moment but I’ll look at it later if I have time

    # December 2, 2012 at 9:38 am

    hi

    u can generate…any shapes using border-radius nd border-sizes

    go through dis…

    [css shapes](http://www.css3shapes.com/ “css3 shapes”)

    # December 2, 2012 at 11:39 am

    @yoyo Are you actually reading the posts? @Paulie_D explained why using borders for the triangles is not a legitimate option in this situation.

    # December 3, 2012 at 9:23 am

    @Paulie_D thanks for the idea. I looked into it but I don’t think it’ll work. I’ll have to switch to images unfortunately.

    # December 3, 2012 at 10:01 am

    Maybe this can help: http://dabblet.com/gist/4013914. Although this is not quite what you’re looking for.

    # May 10, 2013 at 10:28 am

    Basically the trick to making a CSS based triangle use the border-image property and actually get the expected appearance seems to lay largely in the image used.

    The CSS I used last time I did this goes something like this.

    #pyramid{
    display:inline-block;
    border: 150px outset transparent;
    border-top:0px outset transparent;
    border-left:150px outset transparent;
    border-right:150px outset transparent;
    border-image: url(“pyramid_border_image.png”) 150 150 150 150 stretch stretch;
    overflow:visible;
    height :1px; width:1px;
    padding :0; margin:-1px;
    }

    I’m sure that could be thinned out some , but at the time I just wanted to see if I could do it, however I might be revisiting it soon as I want a pyramid for one of my css3 3d things.

    As I was mentioning , the trick seems at least to me to be mostly in the image , specifically the corner pieces for the lower left and lower right corners in the border image. These corners themselves need to have their squares contain 1/2 transparent and 1/2 pattern at the appropriate 45 degree angles for the two bottom corners of the triangle.

    With the properly made image , it’s fairly straight forward after that.

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".