I am trying to achieve the image bellow:

[![enter image description here](https://i.stack.imgur.com/iZIex.png)](https://i.stack.imgur.com/iZIex.png)

I can do a hexagon border and text but I have no idea how to add the hexagon image and to do the grid of 3 hexagons.

Any help will be highly appreciate. If here is more elegant way using clip-path of SVG please help.

Here is my code:

HTML

```
<div class="container">
                        <div class="row">
                        <div class="col-3 col-6-medium col-12-small">
                            <div class="hexagon">
                                <div class="text">
                                    <h3>Head of Trust & Safety,Video Streaming Platform</h3>
                                    <p>"ActiveFence is the foundation of our proactive moderation efforts. It's easy to show that there is no in-house equivalent we could ever develop. Even the best internal teams will never have ActiveFence's subject matter and linguistic expertise, and the cross platform visibility their technology provides is invaluable to keeping our users safe." </p>
                                </div>
                            </div>
                            </div>
                            <div class="col-3 col-6-medium col-12-small">
                            <div class="hexagon">
                                <div class="text">
                                    <h3>Head of Trust & Safety,Video Streaming Platform</h3>
                                    <p>"ActiveFence is the foundation of our proactive moderation efforts. It's easy to show that there is no in-house equivalent we could ever develop. Even the best internal teams will never have ActiveFence's subject matter and linguistic expertise, and the cross platform visibility their technology provides is invaluable to keeping our users safe." </p>
                                </div>
                            </div>
                            </div>
                            <div class="col-3 col-6-medium col-12-small">
                            <div class="hexagon">
                                <div class="text">
                                    <h3>Head of Trust & Safety,Video Streaming Platform</h3>
                                    <p>"ActiveFence is the foundation of our proactive moderation efforts. It's easy to show that there is no in-house equivalent we could ever develop. Even the best internal teams will never have ActiveFence's subject matter and linguistic expertise, and the cross platform visibility their technology provides is invaluable to keeping our users safe." </p>
                                </div>
                            </div>
                            </div>
                        </div>
            </div>

```

CSS

```css
.hexagon {
  position: relative;
  width: 200px; 
  height: 115.47px;
  background-color: #ffffff;
  margin: 57.74px 0;
  border-left: solid 2px #4850be;
  border-right: solid 2px #4850be;
}

.hexagon:before,
.hexagon:after {
  content: "";
  position: absolute;
  z-index: 1;
  width: 141.42px;
  height: 141.42px;
  -webkit-transform: scaleY(0.5774) rotate(-45deg);
  -ms-transform: scaleY(0.5774) rotate(-45deg);
  transform: scaleY(0.5774) rotate(-45deg);
  background-color: inherit;
  left: 27.2893px;
}

.hexagon:before {
  top: -70.7107px;
  border-top: solid 2.8284px #4850be;
  border-right: solid 2.8284px #4850be;
}

.hexagon:after {
  bottom: -70.7107px;
  border-bottom: solid 2.8284px #4850be;
  border-left: solid 2.8284px #4850be;
}

```