Kendo UI Tabstrip with Slanted Tabs

By September 12, 2016CSS, Kendo UI
Here’s another fun tip for Kendo UI developers – a tabstrip with slanted tabs. Did you know you can put additional elements into a Kendo UI tab? Let’s look at how to use an additional element to add a slant to your tabs.
First, start with a basic tabstrip:

Nothing fancy here, just tabs with some dummy content.


Then add an additional element inside the tab itself (not the content). This will be the “arrow” or the slanted side of the tab. Since the tabstrip is created using  the <li> element, we can add our arrow inside.

Now, to make it a slant, we will use some CSS magic using borders to create triangles.  Really, it is a box with 0 width and height, and thick borders visible only on two sides, which gives us the triangle look. Neat!


We just need position the arrow correctly so that it extends the tab container with a bit of overlap. And now we have slanted tabs.


And the best part is that the Kendo UI styling takes care of the style changes and z-index changes needed to make the tab selection look nice.

Here’s the full example you can try out for yourself:

If you like this post, check out some of Falafel’s other blogs for KendoUI tips and problem-solving.

The following two tabs change content below.