fx66/src/components/hexagonBlock.vue

<template>
    <div class="hexagon-container">
      <i class="icon iconfont" v-html="icon"></i>
      <p class="content" v-html="content"></p>
    </div>

</template>

<script>
    export default {
      name: "hexagonBlock",
      props:['icon','content']
    }
</script>

<style scoped lang="less">
  @import "../assets/less/_variable.less";
  @hexagonColor:white;
  @hexagonHeight:100px;
  .hexagon-container {
    width:45px;
    height:100px;
    background: white;
    display: inline-block;
    position: relative;
    line-height: @hexagonHeight;
    color:#FFFFFF;
    font-size: 20px;
    margin-bottom: 135px;
    text-align: center;
    & .content{
      position: absolute;
      height: 20px;
      font-size: 20px;
      line-height: 20px;
      color:@lightBlack;
      left: 50%;
      white-space:nowrap;
      transform: translateX(-50%);
    }
    &:hover{
      &:before{
        border-right-color: @primaryBlue;
      }
      background-color: @primaryBlue;
      &:after{
        border-left-color: @primaryBlue;
      }
      & .icon{
        color: white;
      }
    }
    & .icon{

      font-size: 54px;
      color:@primaryBlue;
    }
    &:before{
      content:"";
      width:0px;
      border-bottom: @hexagonHeight/2 solid transparent;
      border-top:@hexagonHeight/2 solid transparent;
      border-right:40px solid white;
      position:absolute;
      left:-40px;
      top:0px;
    }
    &:after{
      content:"";
      width:0px;
      border-bottom:@hexagonHeight/2 solid transparent;
      border-top:@hexagonHeight/2 solid transparent;
      border-left-width:40px;
      border-left-style: solid;
      border-left-color:white;
      position:absolute;
      right:-40px;
      top:0px;
    }

  }

</style>