css+不规则菜单

<style>

.city {
  display: inline-block;
  margin: 20px 0 0 20px;
  padding: 5px 20px;
  border: 1px solid #44a5fc;
  color: #333;
  transform: skew(-45deg);
}

.city div {
  transform: skew(45deg);
}
.city:hover{ background:red;}

</style>

<html>

  <body>

    <div class="city"><div>上海</div></div>

  <div class="city"><div>澳门</div></div>

   </body>

</html>

posted @ 2017-10-26 13:42  安心牧羊人  阅读(293)  评论(0编辑  收藏  举报