# CSS Tips & Tricks

**URL:** <https://forum.pinegrow.com/t/css-tips-tricks/722>\
**Category:** Styling (CSS)\
**Created:** [February 23, 2017, 3:15am UTC](https://forum.pinegrow.com/t/css-tips-tricks/722 "2017-02-23T03:15:36Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Jack](https://avatars.discourse-cdn.com/v4/letter/j/cc9497/32.png) [@Jack](https://forum.pinegrow.com/u/Jack)\
**Post date:** [February 23, 2017, 3:15am UTC](https://forum.pinegrow.com/t/css-tips-tricks/722/1 "2017-02-23T03:15:36Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![itsmeleo](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/itsmeleo/32/19_2.png) [@itsmeleo](https://forum.pinegrow.com/u/itsmeleo)\
**Post date:** [February 24, 2017, 4:36am UTC](https://forum.pinegrow.com/t/css-tips-tricks/722/2 "2017-02-24T04:36:09Z")

</div>

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](https://jsfiddle.net/f6p6xnj7/)

Thank You!  
LEO

---

<div class="post-metadata">

**Author:** ![Sagarx](https://avatars.discourse-cdn.com/v4/letter/s/a587f6/32.png) [@Sagarx](https://forum.pinegrow.com/u/Sagarx)\
**Post date:** [February 25, 2017, 6:55pm UTC](https://forum.pinegrow.com/t/css-tips-tricks/722/3 "2017-02-25T18:55:37Z")

</div>

> [@Jack](#):
>
> 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.

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

> [@itsmeleo](#):
>
> with the help of this snippet you can create a triange anywhere on any tag. JSFiddle Example

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

---

<div class="post-metadata">

**Author:** ![itsmeleo](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/itsmeleo/32/19_2.png) [@itsmeleo](https://forum.pinegrow.com/u/itsmeleo)\
**Post date:** [February 25, 2017, 7:10pm UTC](https://forum.pinegrow.com/t/css-tips-tricks/722/4 "2017-02-25T19:10:28Z")

</div>

Link was doubled now fixed, you can open it now