Stellen spitzes festes Menü und Tasten

-3

würde Ich mag kann Menü gleiche wie diesesStellen spitzes festes Menü und Tasten

Ich denke, es ist so mit CSS zu tun machen kann mir jemand sagen, wie dies zu tun. Ich habe keinen Code zu teilen, weil ich nicht weiß, wo ich anfangen soll

Quelle

2016-04-26 DamNak

, wenn Sie bereits nur ein einfaches Menü zu tun beginnen, die bereits etwas würde – DanyCode

das Menü Code einfügen kopieren und bearbeiten :) –

<!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>

Quelle

2016-04-26 19:53:09

würde Gradienten tun dies? es kann auch variieren

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

Quelle

2016-04-26 20:07:17

Stellen spitzes festes Menü und Tasten

Antwort

Verwandte Themen