CSS Tips & Tricks

Styling (CSS)
1

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
2

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
3

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

4

Link was doubled now fixed, you can open it now

1 Like