That looks more like background graphic as apposed to what your thinking as “diagonal header”. A “diagonal header” is in fact possible, but would take some extensive CSS and blending / opacity work!
There are a number of ways to get that exact look with X and or Pro, much much easier with Pro. Simply by utilizing the background image features of the “Section” area of Pro.
Me personally… I would create the exact graphic you want… and then use that as the background image for the Header OR Section if thats what you are using… and set it to cover (so that it scales gracefully).