css应用技巧

【斜角按钮】

//html
//斜角按钮
<a class="title_button">信号机</a>
<a class="title_button_on">POM4</a>

//css
//斜角按钮
.title_button,.title_button_on{
    position: relative;
    display: inline-block;
    margin: 0 1px;
    padding: 0 15px;
    color: white;
    font-size: 14px;
  } 
  .title_button::before{
    background: #06479e;//默认背景色
    z-index: -1;//避免背景把按钮挡住
    position: absolute;
    content: '';
    top: 0;left: 0;right: 0;bottom: 0;
    transform: skewX(27deg);
  }

  .title_button_on::before,.title_button:hover::before{
    background: #035fdb;//鼠标移过及选中背景色
    z-index: -1;//避免背景把按钮挡住
    position: absolute;
    content: '';
    top: 0;left: 0;right: 0;bottom: 0;
    transform: skewX(27deg);
  }