請尖尖的固定菜單和按鈕

-3

我認爲它可以使用CSS使任何人都可以告訴我如何做到這一點來完成。我沒有任何代碼分享，因爲我不知道從哪裏開始

2016-04-26 DamNak

如果你已經剛開始做一個基本的菜單，這將是已經 – DanyCode

複製粘貼菜單代碼和編輯它的東西:) –

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8" /> 
    <title>[shape]</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0, minimum-scale=0.5, user-scalable=yes" /> 
    <style> 
     html { 
      font-size: 62.5%; 
      text-align:center; 
     } 
     body { 
      text-align:center; 
      margin:auto; 
      padding-top:20px; 
     } 
     *{ 
      -moz-box-sizing: border-box; 
       -ms-box-sizing: border-box; 
      box-sizing:border-box; 
      margin:0; 
      padding:0; 
      font-size: 2rem; 
      line-height:2.5rem; 
     } 
.row { 
    overflow: hidden; 
} 

.shape { 
    position: relative; 
    width: 150px; 
    height: 70px; 
    line-height: 70px; 
    margin: 0 auto; 
    background: #cccccc; 
    color:#ffffff; 
} 
.shape:before, .shape:after { 
    -webkit-transform: rotate(-30deg); 
    -moz-transform: rotate(-30deg); 
    -ms-transform: rotate(-30deg); 
    -o-transform: rotate(-30deg); 
    transform: rotate(-30deg); 
    width: 50px; 
    height:100px; 
    background: #cccccc; 
    content: ''; 
} 
.shape:before { 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    -webkit-transform-origin: left bottom; 
    -moz-transform-origin: left bottom; 
    -ms-transform-origin: left bottom; 
    -o-transform-origin: left bottom; 
    transform-origin: left bottom; 
} 
.shape:after { 
    position: absolute; 
    top: 0; 
    right: 0; 
    -webkit-transform-origin: right top; 
    -moz-transform-origin: right top; 
    -ms-transform-origin: right top; 
    -o-transform-origin: right top; 
    transform-origin: right top; 
} 
    </style> 
</head> 
<body> 
    <div class="row"><div class="shape">MENU</div></div> 
</body> 
</html>

來源

2016-04-26 19:53:09

會漸變做到這一點？它也可以改變

nav { 
 
    background:#333; 
 
    padding-right:2.85em; /* same value as negative margin on a , optionnal depending on result wished */ 
 
    
 
    } 
 
a { 
 
    color:white; 
 
    padding:0.5em 3em; 
 
    display:inline-block; margin:0 -2.85em 0 0; /* tune to whatever if you want bg to touch or not */ 
 
    
 
    background:linear-gradient(135deg, transparent 1.75em, gray 70%) no-repeat left,linear-gradient(-45deg, transparent 1.75em, gray 70%) no-repeat right; 
 
    background-size:50% auto; 
 
    } 
 
.active { 
 
    background:linear-gradient(135deg, transparent 1.75em, #0278F4 1.5em) no-repeat left,linear-gradient(-45deg, transparent 1.75em, #0278F4 1.5em) no-repeat right; 
 
    background-size:60% auto; 
 
    
 
    } 
 
/* different color on hover ? */ 
 
a:hover { 
 
    background:linear-gradient(135deg, transparent 1.75em, tomato 1.5em) no-repeat left,linear-gradient(-45deg, transparent 1.75em, tomato 1.5em) no-repeat right; 
 
    background-size:60% auto; 
 
    
 
    }

<nav> 
 
    <a href="#">Home</a> 
 
    <a href="#" class="active">About</a> 
 
    <a href="#">Clients</a> 
 
    <a href="#">Contact Us</a> 
 
</nav>

codepen to play with

來源

2016-04-26 20:07:17

請尖尖的固定菜單和按鈕

回答

相關問題