Hexagonal flip box

How to?

  1. Add the Call to Action widget to content area
  2. Style the widget as same as an example below

  3. Don’t forget to add class to widget
  4. Add CSS below to the page

CSS:

				
					.hexagonal-wrap .elementor-column {
    margin: -30px;
}

.hexagonal-wrap > div {
    margin: 0 auto !important;
    -webki-justify-content: center;
    -ms-justify-content: center;
    justify-content: center;
    max-width: 1495px;
}

.hexagon-box {
    background: #fff;
    -webkit-clip-path: url(#hexagono);
    clip-path: url(#hexagono);
    -webkit-clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
    clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
    margin-right: calc(5% / 2);
    overflow: hidden;
}

.hexagon-box::before {
    content: "";
    width: 25%;
    height: 100%;
    clip-path: polygon(0% 0%, 100% 0%, 0% 50%, 100% 100%, 0% 100%);
    shape-outside: polygon(0% 0%, 100% 0%, 0% 50%, 100% 100%, 0% 100%);
}

.hexagon-box .elementor-widget-container {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    max-width: 100%;
    height: 100%;
    line-height: 1.4;
}

.hexagon-box .elementor-flip-box {
    z-index: 10;
}

@media (max-width: 1441px) {
    .hexagonal-wrap > div {
        margin: 0 -75px !important;
    }
}

@media (max-width: 1024px) {
    .hexagonal-wrap > div,
    .hexagonal-wrap .elementor-column,
    .hexagon-box {
        margin: 0 auto !important;
    }
}

@media (max-width: 767px) {
    .hexagon-box {
        margin-bottom: 15px !important;
    }
}

Example:

Unlimited Help Desk Coverage

Unlimited Help Desk Coverage

We’re always here to help – and we won’t send you a bill every time you call. You have access to our 24/7 help desk team of technicians and engineers. Don’t like robots? We don’t either. That’s why we answer our phones live!