Search code examples
cssrotationtransformperspectiveskew

Spaceship menu with CSS

Basically, the image below summarizes my question.

Spaceship

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

Solution

  • 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">
        <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>

    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.