Spaceship menu with CSS - css

Question

Basically, the image below summarizes my question.
Is there any elegant solution to make it work? I've tried to use rotate, skew and perspective, but didn't work for me.
Note: the background needs to be transparent.
My code for you. :)
* { 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">
Button 1
Button 2
Button 3
Button 4
Button 5
Button 6
</div>
</div>

Answer 1

Here's what I changed your css to make it look like your picture and do the correct hover effect:
* { 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">
Button 1
Button 2
Button 3
Button 4
Button 5
Button 6
</div>
</div>
So basically to create a 65px high trapezoid with borders (colored #0f0) you'd do this:
border-bottom: 65px solid #0f0;
border-left: 3px solid transparent;
border-right: 3px solid transparent;
The width of the last element is 100px. So since the left border width + the right border width = 6px and 100px - 6px = 94px, the second to last element will have a width of 94px to match the top of the last element. You subtract the side border sum from the previous elements width to get the current element width.
Also the transition property needs to be changed to border-bottom-color instead of background because border-bottom-color is what sets the color of the trapezoid.

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">
Button 1
Button 2
Button 3
Button 4
Button 5
Button 6
</div>
</div>

Answer 3

I'm pretty sure you need javascript for that.
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(''+ buttons[b].name + ' ' + b +'').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>