CSS: responsive elongated hexagon with text and background / border gradient

Question

I am trying to create two elongated hexagons:

Main functions:

• the ability to add a gradient background
• the ability to add a gradient border
• the text can be two-line or one-line
• responsiveness in the Bootstrap grid (nice to have) - angles must always be the same.

According to the elongated hexagonal button using only one element , the best solution so far is https://jsfiddle.net/veuc78af/ :

/*hexagons*/ .hexagon { box-sizing: border-box; position: relative; display: inline-block; min-width: 200px; height: 80px; margin: 40px auto; color: #fd0; text-align: center; text-decoration: none; line-height: 80px; } .hexagon:before, .hexagon:after { position: absolute; content:''; width: 100%; left: 0px; height: 34px; z-index: -1; } .hexagon:before { transform: perspective(15px) rotateX(3deg); } .hexagon:after { top: 40px; transform: perspective(15px) rotateX(-3deg); } /* hexagon Border Style */ .hexagon.border:before, .hexagon.border:after { border: 4px solid #fd0; } .hexagon.border:before { border-bottom: none; /* to prevent the border-line showing up in the middle of the shape */ } .hexagon.border:after { border-top: none; /* to prevent the border-line showing up in the middle of the shape */ } /* hexagon hover styles */ .hexagon.border:hover:before, .hexagon.border:hover:after { background: #fd0; } .hexagon.border:hover { color: #fff; } 

The main problem with this solution is that it is not possible to create a gradient background. So this does not work in my case.

Is there any way to do this?

The main platform for this project is Safari on iPad2.

Answer 1

Using CSS clip path:

The main platform for this project is Safari on iPad2.

Since your main platform is Safari and it supports CSS clip-path with shapes , you can use this function to create elongated hexagons, as in the demo below.

The result created by this approach will support (a) the gradient background (b) the gradient border, which is simulated by placing a pseudo-element with very similar clip-path , but smaller sizes (c) with two lines of text (d) also preserve the angles of the corners, since the dots are at a fixed distance px.

 .hex { position: relative; float: left; height: 100px; min-width: 100px; padding: 12px; margin: 4px; font-weight: bold; text-align: center; background: linear-gradient(to right, rgb(199, 41, 41), rgb(243, 67, 54)); -webkit-clip-path: polygon(25px 0px, calc(100% - 25px) 0px, 100% 50%, calc(100% - 25px) 100%, 25px 100%, 0px 50%); } .hex.gradient-bg { color: white; } .hex.gradient-border { color: rgb(199, 41, 41); } .hex:before { position: absolute; content: ''; height: calc(100% - 14px); /* 100% - 2 * border width */ width: calc(100% - 14px); /* 100% - 2 * border width */ left: 7px; /* border width */ top: 7px; /* border width */ -webkit-clip-path: polygon(22px 0px, calc(100% - 22px) 0px, 100% 50%, calc(100% - 22px) 100%, 22px 100%, 0px 50%); z-index: -1; } .hex.gradient-bg:before { background: linear-gradient(to right, rgb(199, 41, 41), rgb(243, 67, 54)); } .hex.gradient-border:before { background: rgb(245, 246, 248); } span { display: block; margin-top: 50px; padding: 8px; transform: translateY(-50%); } 

 <div class='hex gradient-border'> <span>Some text</span> </div> <div class='hex gradient-bg'> <span>Some very lengthy text</span> </div> <div class='hex gradient-bg'> <span>Some very lengthy text <br/>with line break</span> </div> <div class='hex gradient-bg'> <span>Some very lengthy text without line break</span> </div> 

---

Using SVG:

You can do the same with SVG, as in the demo below. To do this, create a path in the shape of a hexagon, and then for this image path , which will be placed behind the container.

The only drawback is that, unlike CSS clip-path there is no non-JS method to force the angles to remain unchanged.

 .hex { position: relative; height: 100px; min-width: 100px; padding: 12px 24px; margin: 4px; float: left; font-weight: bold; text-align: center; } .hex.gradient-bg { color: white; } .hex.gradient-border { color: rgb(199, 41, 41); } .hex svg { position: absolute; height: 100%; width: 100%; top: 0px; left: 0px; z-index: -1; } path { stroke: url(#brdgrad); stroke-width: 7; /* border width */ } .hex.gradient-bg path { fill: url(#bggrad); } .hex.gradient-border path { fill: rgb(245, 246, 248); } span { display: block; margin-top: 50px; padding: 8px; transform: translateY(-50%); } 

 <svg width='0' height='0'> <defs> <linearGradient id='bggrad'> <stop offset='0%' stop-color='rgb(199, 41, 41)' /> <stop offset='100%' stop-color='rgb(243, 67, 54)' /> </linearGradient> <linearGradient id='brdgrad'> <stop offset='0%' stop-color='rgb(199, 41, 41)' /> <stop offset='100%' stop-color='rgb(243, 67, 54)' /> </linearGradient> </defs> </svg> <div class='hex gradient-border'> <svg viewBox='0 0 100 100' preserveAspectRatio='none'> <path d='M25,7 L75,7 93,50 75,93 25,93 7,50z' vector-effect='non-scaling-stroke' /> </svg> <span>Some text</span> </div> <div class='hex gradient-bg'> <svg viewBox='0 0 100 100' preserveAspectRatio='none'> <path d='M25,7 L75,7 93,50 75,93 25,93 7,50z' vector-effect='non-scaling-stroke' /> </svg> <span>Some very lengthy text</span> </div> <div class='hex gradient-bg'> <svg viewBox='0 0 100 100' preserveAspectRatio='none'> <path d='M25,7 L75,7 93,50 75,93 25,93 7,50z' vector-effect='non-scaling-stroke' /> </svg> <span>Some very lengthy text <br>with line break.</span> </div> <div class='hex gradient-bg'> <svg viewBox='0 0 100 100' preserveAspectRatio='none'> <path d='M25,7 L75,7 93,50 75,93 25,93 7,50z' vector-effect='non-scaling-stroke' /> </svg> <span>Some lengthy text without line break.</span> </div> 

(Do not delay how long the SVG code is, it is so large just because I repeated it more than once — once for each container. This can be reduced.)

Answer 2

 .hexagon { position: relative; width: 180px; height: 103.92px; background-color: #ffffff; margin: 51.96px 0; border-left: solid 5px #808080; border-right: solid 5px #808080; } .hexagon:before, .hexagon:after { content: ""; position: absolute; z-index: 1; width: 127.28px; height: 127.28px; -webkit-transform: scaleY(0.5774) rotate(-45deg); -ms-transform: scaleY(0.5774) rotate(-45deg); transform: scaleY(0.5774) rotate(-45deg); background-color: inherit; left: 21.3604px; } .hexagon:before { top: -63.6396px; border-top: solid 7.0711px #808080; border-right: solid 7.0711px #808080; } .hexagon:after { bottom: -63.6396px; border-bottom: solid 7.0711px #808080; border-left: solid 7.0711px #808080; } .hexText{ position: absolute; top: 59px; z-index: 999; left: 12%; text-align:center; } .bgGrey{ background:#e7e6e6 !important; } <div class="row"> <div class="col-md-3 col-xs-12"> <div class="hexagon"></div> <p class="hexText">Up to 20% increase<br />in sales with<br />Cross sell & Up sell</p> </div> <div class="col-md-3 col-xs-12"> <div class="hexagon bgGrey"></div> <p class="hexText">Up to 35%reduction<br />in print ,postage ,<br />logistic & back<br />office cost</p> </div> <div class="col-md-3 col-xs-12"> <div class="hexagon"></div> <p class="hexText">Scalable100+million <br />statements<br />processed & <br />distributed monthly </p> </div> <div class="col-md-3 col-xs-12"> <div class="hexagon bgGrey"></div> <p class="hexText">Up to 35%reduction<br />in print ,postage ,<br />logistic & back<br />office cost</p> </div> </div>