Fancy tabs using pure CSS and AngularJS

I'll start this post with demonstration of what I mean by "fancy"

One way to do that, would be using a predefined image for each tab for each state. 

As you can see from the pictures above, it would be 4 separate images cut to fit specific dimensions. 

Downsides of this approach would be:

1. Resizing of these tabs won't be possible,  if you try to do so, you will definitely change the triangular part angle 
2. Downloading pretty big images might be noticeable
3. Adding effects on tab swap will look clunky

On the positive side, I would put only the ease of implementation.

After playing a while with CSS options and adding some AngularJS wiring  (my application is using AngularJS so it was necessary), I came up with following solution:

This code snippet shows how to create two tabs control with triangular inner side of the tab. The tab swapping powered by AngularJS, of course it can be done using JQuery or any other JS library.

http://codepen.io/IVedmak/pen/OVOboX

Note:

A proper way to do that would be creating a directive, that will support multiple tabs, but currently I'm a bit short of time. 

This solutions seems to be working for me, I've removed most of the unnecessary content to keep the code clean.

Very nice site http://www.cssmatic.com/. It allows you to visually define some of the CSS features and copy the resulting stylesheet.
I've used it to define an appropriate shadow for a tab control I've had to develope for my company. 

File input control don't have to be ugly

The caption is a bit of a lie, it has to be ugly, since native browser implementation is pretty ugly and there is no straight forward way to change it's L&F.

So what do you do when your have a nice bootstrap  L&F in the whole system?

This fiddle suggesting a nice solution that was inspired by this guy.

I've used it together with AngularJS file uploader directive and it looks and works pretty nice good together.

In general the solution is :

1. To make the sure you file input tag is transparent 
2. To increase it's z-index so it will be above
3. To locate it on the same spot a nice looking control is located
4. To make sure z-index of nice looking control is lower than the file input tag

Actually that all the story, if anyone familiar with better techniques to prettify file input tag, please leave a comment bellow.