Shaped thead?

[Dizzygaming]

Hello everyone,

Could anyone help, how could I achieve the shaped thead seen in the picture. 

Also how can I colour individual theads?

---

Any help at all would be great I’m really stuck.

[iAndrew]

You could trying using CSS3 transform.
This is an example I used for the same effect but on buttons.

transform: skew(-18deg);

For individual thead styling use this tutorial.
https://community.mybb.com/thread-231646.html

[meetdilip]

Thanks @iAndrew , nice way to create the shear

@OP

.thead {
    background-image: url(https://i.imgur.com/uKnZnXH.png);
    background-repeat: no-repeat;
}

This code works for me. For perfection, you will have to work on the image and make one of your own.

---

It will appear something like this



I made these images, might help you create your own

[Dizzygaming]

Thanks @iAndrew , nice way to create the shear

@OP

.thead {
    background-image: url(https://i.imgur.com/uKnZnXH.png);
    background-repeat: no-repeat;
}

This code works for me. For perfection, you will have to work on the image and make one of your own.

---

It will appear something like this



I made these images, might help you create your own

I just replaced the thead css with this and nothing changed, lol I must be doing something wrong

---

You could trying using CSS3 transform.
This is an example I used for the same effect but on buttons.

transform: skew(-18deg);

For individual thead styling use this tutorial.
https://community.mybb.com/thread-231646.html

Sorry, where would I put the code?

---

You could trying using CSS3 transform.
This is an example I used for the same effect but on buttons.

transform: skew(-18deg);

For individual thead styling use this tutorial.
https://community.mybb.com/thread-231646.html

How would I skew just on one side?

[iAndrew]

How would I skew just on one side?

My code was just an example of how you could do it. You would need to further edit the templates.

Here is an easier way for you.

    background: #0066a2 url(images/right-side-image.jpg) top right no-repeat;

   

[Dizzygaming]

How would I skew just on one side?

My code was just an example of how you could do it. You would need to further edit the templates.

Here is an easier way for you.

    background: #0066a2 url(images/right-side-image.jpg) top right no-repeat;

Thank you for your help, I'd have to look into this further to achieve what I want.