Question

我想使菜单与此相同

我认为可以使用css完成，所以任何人都可以告诉我如何做到这一点。我没有任何代码可以分享，因为我不知道从哪里开始

Answer 1

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

Answer 2

渐变会这样做吗？它也可以变化

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

制作尖头固定菜单和按钮

2 个答案: