Pinegrow Community Support Forum

CSS Tips & Tricks

I’m pretty sure there are some members who have much more experience and knowledge of CSS than myself, however over the last few months I have picked many neat CSS tricks and tips and maybe people can share their knowledge?

I know @Pinegrow_User has mentioned keyframes before and I was looking into this recently as I want to use keyframes to create a typewriter effect as part of a header.

One simple but neat way of breaking up blocks is to use a triangle. Easy way of doing this is to drop a div into the page. Give it a class such as .triangle-down

Use the following CSS ( just change the px and colour value to suit your layout)

{
    width: 0;
    height: 0;
    border-left: 25px solid transparent;
    border-right: 25px solid transparent;
    border-top: 50px solid #6015A8;
    margin-left: auto;
    margin-right: auto;
}

You can then drop this div after (or between) blocks, if the one above has a solid colour, giving you a centred triangle, and a simple slick way to impress visitors.

1 Like

This is how i do it

<h1 id="header">Welcome to My Website</h1>

      #header{
        max-width: 960px;
        min-height: 100px;
        text-align:center;
        background-color:#000;
        color:#fff;
        line-height:100px;
        position:relative;
      }
       #header:after{
            content:"";
            border-left: 25px solid transparent;
            border-right: 25px solid transparent;
            border-top: 25px solid #fff;
            position:absolute;
            left:40%;
        }

with the help of this snippet you can create a triange anywhere on any tag. JSFiddle Example

Thank You!
LEO

2 Likes

Simple but effective tested to 200px but would change to margin: 0 auto; if not using pinegrow css menu but good for just separator

link is broken? but this better suited if using triangle for different tags

Link was doubled now fixed, you can open it now

1 Like