CSS 的飞船菜单

Question

基本上，下图总结了我的问题。

有什么优雅的解决方案可以让它工作吗？我试过使用 rotate、skew 和 perspective，但对我不起作用。

注意：背景需要透明

我的代码给你。 :)

* { box-sizing: border-box; }
body { font: normal 16px sans-serif; }

.spaceship {
  height: 430px;
  position: relative;
  width: 140px;
}

.spaceship::before {
  background: #006dd9;
  border-radius: 100%;
  content: '';
  height: 70px;
  position: absolute;
  width: 140px;
  z-index: 1;
}

.abduction {
  background: #0f0;
  height: 370px;
  left: 20px;
  padding-top: 10px;
  position: absolute;
  top: 60px;
  width: 100px;
}

.abduction a {
  color: #fff;
  display: block;
  height: 60px;
  padding-top: 25px;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  transition: background 500ms;
}

.abduction a:nth-child(even) { background: #00d900; }
.abduction a:hover { background: #008c00; }

<div class="spaceship">
  <div class="abduction">
    <a href="#">Button 1</a>
    <a href="#">Button 2</a>
    <a href="#">Button 3</a>
    <a href="#">Button 4</a>
    <a href="#">Button 5</a>
    <a href="#">Button 6</a>
  </div>
</div>

Answer 1

我很确定您需要 javascript。

jQuery(document).ready(function(){

  
  var buttons = [{name:'button'},{name:'button'},{name:'button'},{name:'button'},{name:'button'},{name:'button'}];
  
  
  var b;
  
 
  
  for(b in buttons){
    
      var rev = buttons.length - (b*10);
    
      var btn = jQuery('<a href="#">'+ buttons[b].name + ' ' + b +'</a>').css({left:rev/2, width:100 - rev} );
    
      jQuery('.abduction').append(btn);
   }
});

* { box-sizing: border-box; }
body { font: normal 16px sans-serif; }

.spaceship {
  height: 430px;
  position: relative;
  width: 140px;
}

.spaceship::before {
  background: #006dd9;
  border-radius: 100%;
  content: '';
  height: 70px;
  position: absolute;
  width: 140px;
  z-index: 1;
}

.abduction {
  
  height: 370px;
  left: 20px;
  padding-top: 10px;
  position: absolute;
  top: 60px;
  width: 100px;
}

.abduction a {
  display:block;
  position:relative;
  
  color: #fff;
  display: block;
  height: 60px;
  
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  transition: background 500ms;
  
  border-bottom:80px solid #0f0;
  border-left:5px solid transparent;
  border-right:5px solid transparent;
}

.abduction a:nth-child(even) { border-bottom: 80px solid #00d900; }
.abduction a:hover { border-bottom: 80px solid #008c00; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="spaceship">
  <div class="abduction">

  </div>
</div>

Answer 2

* { box-sizing: border-box; }
body { font: normal 16px sans-serif; }

.spaceship {
  height: 430px;
  position: relative;
  width: 140px;
}

.spaceship::before {
  background: #006dd9;
  border-radius: 100%;
  content: '';
  height: 70px;
  position: absolute;
  width: 140px;
  z-index: 1;
}

.abduction {
      height: 370px;
      left: 15px;
      padding-top: 10px;
      position: absolute;
      top: 50px;
      width: 110px;
      border-left: 10px solid transparent;
      border-right: 10px solid transparent;
      border-bottom: 400px solid #0f0;
}

.abduction a {
  color: #fff;
  display: block;
  height: 60px;
  padding-top: 25px;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  transition: background 500ms;
}

.abduction a:nth-child(even) { background: #00d900; }
.abduction a:hover { background: #008c00; }

<div class="spaceship">
  <div class="abduction">
    <a href="#">Button 1</a>
    <a href="#">Button 2</a>
    <a href="#">Button 3</a>
    <a href="#">Button 4</a>
    <a href="#">Button 5</a>
    <a href="#">Button 6</a>
  </div>
</div>

Answer 3

以下是我对您的 css 所做的更改，使其看起来像您的照片并实现正确的悬停效果：

* { box-sizing: border-box; }
body { font: normal 16px sans-serif; }

.spaceship {
 height: 430px;
 position: relative;
 width: 140px;
}

.spaceship::before {
 background: #006dd9;
 border-radius: 100%;
 content: '';
 height: 70px;
 position: absolute;
 width: 140px;
 z-index: 1;
}

.abduction {
 height: 370px;
 left: 20px;
 padding-top: 5px;
 position: absolute;
 top: 60px;
 width: 100px;
}

.abduction a {
 color: #fff;
 display: block;
 height: 65px;
 margin: 0 auto;
 padding: 0;
 border-bottom: 65px solid #0f0;
 border-left: 3px solid transparent;
 border-right: 3px solid transparent;
 line-height: 5;
 font-size: 12px;
 text-align: center;
 text-decoration: none;
 text-transform: uppercase;
 transition: border-bottom-color 500ms;
}

.abduction a:nth-child(5){
 width: 94px;
}

.abduction a:nth-child(4){
 width: 88px;
}

.abduction a:nth-child(3){
 width: 82px;
}

.abduction a:nth-child(2){
 width: 76px;
}

.abduction a:nth-child(1){
 width: 70px;
}

.abduction a:nth-child(even) { border-bottom-color: #00d900; }
.abduction a:hover { border-bottom-color: #008c00; }

   

 <div class="spaceship">
      <div class="abduction">
        <a href="#">Button 1</a>
        <a href="#">Button 2</a>
        <a href="#">Button 3</a>
        <a href="#">Button 4</a>
        <a href="#">Button 5</a>
        <a href="#">Button 6</a>
      </div>
    </div>

所以基本上要创建一个带边框的 65px 高梯形（颜色为 #0f0），您需要这样做：

border-bottom: 65px solid #0f0;
border-left: 3px solid transparent;
border-right: 3px solid transparent;

最后一个元素的宽度是 100px。因此，由于左边框宽度 + 右边框宽度 = 6px 和 100px - 6px = 94px，倒数第二个元素的宽度为 94px 以匹配最后一个元素的顶部。您从先前的元素宽度中减去侧边框总和以获得当前元素宽度。

此外，过渡属性需要更改为 border-bottom-color 而不是背景，因为 border-bottom-color 是设置梯形颜色的因素。

CSS 的飞船菜单

Spaceship menu with CSS

css

transform

rotation

perspective

skew