CODEWITHSUNDEEP
csssvgcss-shapes
Zbyszek Kisły
Zbyszek Kisły

Reputation: 2238

Hexagon with semi transparent background and border

I've scrapped some code for a hexagon shaped div and it works pretty well. The problem is now I need it a semi-transparent background, but the :after and :before tags overlap and that causes inconsistency in transparency.

.hexagon {
  position: relative;
  width: 290px;
  height: 173.21px;
  margin: 86.60px 0;
  border-left: solid 5px #333333;
  border-right: solid 5px #333333;
  background-color: rgb(102, 204, 34, 0.7);
}

.hexagon:before,
.hexagon:after {
  box-sizing: border-box;
  content: "";
  position: absolute;
  z-index: 1;
  width: 212.13px;
  height: 212.13px;
  -webkit-transform: scaleY(0.5774) rotate(-45deg);
  -ms-transform: scaleY(0.5774) rotate(-45deg);
  transform: scaleY(0.5774) rotate(-45deg);
  background-color: rgb(102, 204, 34, 0.7);
  left: 38.9340px;
}

.hexagon:before {
  top: -106.0660px;
  border-top: solid 7.0711px #333333;
  border-right: solid 7.0711px #333333;
}

.hexagon:after {
  bottom: -106.0660px;
  border-bottom: solid 7.0711px #333333;
  border-left: solid 7.0711px #333333;
}
<div class="hexagon">
  <span style="font-size: 11px">1</span>
  <span>2     </span>
</div>

What would be the best way to make it work?

Upvotes: 3

Views: 2277

Answers (2)

Temani Afif
Temani Afif

Reputation: 273086

You can modify the background-color of the pseudo element with gradient to color only half of it:

.hexagon {
  position: relative;
  width: 290px;
  height: 173.21px;
  margin: 86.60px 0;
  border-left: solid 5px #333333;
  border-right: solid 5px #333333;
  background-color: rgb(102, 204, 34, 0.7);
}

.hexagon:before,
.hexagon:after {
  box-sizing: border-box;
  content: "";
  position: absolute;
  z-index: 1;
  width: 212.13px;
  height: 212.13px;
  -webkit-transform: scaleY(0.5774) rotate(-45deg);
  -ms-transform: scaleY(0.5774) rotate(-45deg);
  transform: scaleY(0.5774) rotate(-45deg);
  left: 38.9340px;
}

.hexagon:before {
  top: -106.0660px;
  border-top: solid 7.0711px #333333;
  border-right: solid 7.0711px #333333;
  background:linear-gradient(to bottom left,rgb(102, 204, 34, 0.7) 48%,transparent 48%);
}

.hexagon:after {
  bottom: -106.0660px;
  border-bottom: solid 7.0711px #333333;
  border-left: solid 7.0711px #333333;
  background:linear-gradient(to top right,rgb(102, 204, 34, 0.7) 48%,transparent 49%);
}
<div class="hexagon">
  <span style="font-size: 11px">1</span>
  <span>2     </span>
</div>

You may also consider an SVG solution:

body {
 margin:0;
 background:linear-gradient(to right, blue 10%,pink);
}

.box {
  background: url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="174" height="200" viewBox="-5 -5 180 220"><path fill="rgb(102, 204, 34, 0.5)" stroke="black" stroke-width="3" d="M86.60254037844386 0L173.20508075688772 50L173.20508075688772 150L86.60254037844386 200L0 150L0 50Z"></path></svg>');
  height: 200px;
  width: 180px;
  background-repeat: no-repeat;
  background-position: center;
  display:inline-block;
  line-height:150px;
  text-align:center;
}
svg {
 display:inline-block;
 vertical-align:top;
}
<div class="box">
  SVG as background
</div>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="174" height="200" viewBox="-5 -5 180 220"><path fill="rgb(102, 204, 34, 0.5)" stroke="black" stroke-width="3" d="M86.60254037844386 0L173.20508075688772 50L173.20508075688772 150L86.60254037844386 200L0 150L0 50Z"></path>
<text x=20 y=80 >Normal SVG</text>
</svg>

Here is another non-perfect idea combining clip-path and gradient:

body {
 background:linear-gradient(to right,pink, blue);
}
.hexagon {
  position: relative;
  width: 290px;
  height: 290px;
  margin: 50px;
  background:
  linear-gradient(to bottom left,transparent calc(50% - 3px),#000 calc(50% - 3px))0 100%/50% 25% no-repeat,
  linear-gradient(to bottom right,transparent calc(50% - 3px),#000 calc(50% - 3px))100% 100%/50% 25% no-repeat,
  linear-gradient(to top right,transparent calc(50% - 3px),#000 calc(50% - 3px))100% 0/50% 25% no-repeat,
  linear-gradient(to top left,transparent calc(50% - 3px),#000 calc(50% - 3px))0 0/50% 25% no-repeat,
  linear-gradient(#000,#000)0 0/3px 100% no-repeat,
  linear-gradient(#000,#000)100% 0/3px 100% no-repeat,
  rgba(102, 204, 34, 0.5);
  -webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}
<div class="hexagon">
</div>

Upvotes: 4

web-tiki
web-tiki

Reputation: 103790

Considering that you seem to only need one hexagon, that you want to give it a border and a semi transparent background, I would suggest using an inline svg.

It would be as simple as this : 

svg{display:block;width:30%;margin:0 auto;}
body{background:url('https://farm9.staticflickr.com/8760/17195790401_ceeeafcddb_o.jpg');background-position:center;background-size:cover;}
<svg viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <polygon fill="#92D050"
           fill-opacity=".7"
           stroke="#000"
           stroke-width="2"
           points="50 1 95 25 95 75 50 99 5 75 5 25"/>
</svg>

In the above code:

  • The fill and fill-opacity property control the color and opacity of the hexagon,
  • The stroke and stroke-width control the color and width of the hexagon border
  • The points property make the hexagon shape

More info :

Upvotes: 4

Related Questions