CSS 斜めメニューを作る。

---

html

<nav>
  <a href="#1">home</a>
  <a href="#2">about</a>
  <a href="#3">content</a>
  <a href="#4">link</a>
</nav>

CSS

body{
  margin: 0;
  padding: 0;
}

nav{
  position: relative;
  
  display: block;
  padding: .35em .25em .35em 0;
  border-bottom: 2px solid aliceblue;
  
  /* inline-blockを右寄せで配置 */
  text-align: right;
  /* リンクのはみ出し防止 */
  overflow: hidden;
  box-sizing: border-box;
}

a{
  position: relative;
  display: inline-block;

  font-size: 1.1em;
  /* リンクの間隔 */
  margin-right: .625em;
  padding: 1em .15em;
  line-height: 1;

  color: rgb(30,144,255);

  
  text-decoration: none;
  text-align: left;
  box-sizing: border-box;
  
  transform: rotate(-45deg);
}

/* リンク範囲拡張 */
a:before{
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  
  /* widthは多めに取っておく */
  width: 500%; height: 100%;
  background-color: inherit;

  transform: translate(-50%,-50%);
}

a:first-letter{
  font-size: 1.2em;
  text-transform: uppercase;
}

a:hover,
a:focus{
  outline: none;
  background-color: rgba(30,144,255,.05);
}

補足

---

a:beforeでリンク範囲を拡張しています、aタグの幅や高さを直接拡張すると
transform(回転)の扱いが難しくなり微調整が必要になるので:beforeを使っています。