How can I add a colored shadow at the right inside of my hexagon?
I will consider a different hexagon taken from this answer then as a background coloration I will use two layers, the main color and the gradient to simulate the shadow:
.hex {
width: 200px;
display: inline-block;
color:orange;
position:relative;
filter: url('#goo'); /* to get the rounded edge */
}
.hex::before,
.hex::after { /* the polygon shape */
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
display:flex;
}
.hex::before{
content: "";
background:
linear-gradient(50deg,transparent 10px, rgba(0,0,0,0.2) 0 calc(100% - 45px),transparent calc(100% - 44px))
100% 100%/ 70% 89% no-repeat,
currentColor; /* Use the color defined by "color" */
padding-top: 86.6%; /* 100%*cos(30) */
}
.hex::after {
content: attr(data-text);
font-size:80px;
position:absolute;
top:18px;
left:18px;
right:18px;
bottom:18px;
background:#fff; /* this should match the main background */
align-items:center;
justify-content:center;
}
<div class="hex" data-text="01"></div>
<div class="hex" data-text="02" style="color:pink;filter:none"></div>
<div class="hex" data-text="03" style="color:lightblue"></div>
<svg style="visibility: hidden; position: absolute;" width="0" height="0" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<filter id="goo"><feGaussianBlur in="SourceGraphic" stdDeviation="8" result="blur" />
<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 19 -9" result="goo" />
<feComposite in="SourceGraphic" in2="goo" operator="atop"/>
</filter>
</defs>
</svg>
My approach - create a generic SVG and use CSS to change the colors:
Codepen: https://codepen.io/seanstopnik/pen/6d30d9a0dc54456f9be26d41e9747785
body {
font-family: sans-serif; /* for demo only */
}
.hex {
position: relative;
width: 200px; /* for demo only - see Codepen */
}
.hex__heading {
position: absolute;
top: 50%;
left: 50%;
font-size: 66.6666666667px; /* for demo only - see Codepen */
font-weight: 700;
transform: translate(-50%, -50%);
}
.hex__center {
fill: #fff;
}
.hex--primary .hex__heading {
color: #97db54;
}
.hex--primary .hex__stroke {
fill: #97db54;
}
.hex--primary .hex__shadow {
fill: #6cc245;
}
.hex--secondary .hex__heading {
color: #5fc69e;
}
.hex--secondary .hex__stroke {
fill: #5fc69e;
}
.hex--secondary .hex__shadow {
fill: #4c9f67;
}
.hex--tertiary .hex__heading {
color: #4da2bf;
}
.hex--tertiary .hex__stroke {
fill: #4da2bf;
}
.hex--tertiary .hex__shadow {
fill: #2b648a;
}
<div class="hex hex--primary">
<span class="hex__heading">01</span>
<svg class="hexagon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 174.284">
<path class="hex__stroke" d="M147.988 0H52.012a4.024 4.024 0 00-3.485 2.012L.539 85.129a4.025 4.025 0 000 4.025l47.988 83.117a4.025 4.025 0 003.485 2.013h95.976a4.025 4.025 0 003.485-2.013l47.988-83.117a4.025 4.025 0 000-4.025L151.473 2.012A4.024 4.024 0 00147.988 0zm-8.134 160.2H60.146a4.026 4.026 0 01-3.486-2.012L16.806 89.154a4.025 4.025 0 010-4.025L56.66 16.1a4.024 4.024 0 013.486-2.013h79.708a4.024 4.024 0 013.486 2.013l39.854 69.029a4.025 4.025 0 010 4.025l-39.854 69.03a4.026 4.026 0 01-3.486 2.016z"/>
<path class="hex__shadow" d="M199.461 85.129l-15.687-27.17L143.268 16.2l-.012.021L183.2 85.14a4 4 0 010 4.006l-39.849 69.02a4 4 0 01-3.516 2l-82.1-1.079 17.944 15.2h72.306a4.025 4.025 0 003.485-2.013l47.988-83.117a4.025 4.025 0 00.003-4.028z"/>
<path class="hex__center" d="M139.854 14.087H60.146A4.024 4.024 0 0056.66 16.1L16.806 85.129a4.025 4.025 0 000 4.025l39.854 69.03a4.026 4.026 0 003.486 2.012h79.708a4.026 4.026 0 003.486-2.012l39.854-69.03a4.025 4.025 0 000-4.025L143.34 16.1a4.024 4.024 0 00-3.486-2.013z"/>
</svg>
</div>
<div class="hex hex--secondary">
<span class="hex__heading">02</span>
<svg class="hexagon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 174.284">
<path class="hex__stroke" d="M147.988 0H52.012a4.024 4.024 0 00-3.485 2.012L.539 85.129a4.025 4.025 0 000 4.025l47.988 83.117a4.025 4.025 0 003.485 2.013h95.976a4.025 4.025 0 003.485-2.013l47.988-83.117a4.025 4.025 0 000-4.025L151.473 2.012A4.024 4.024 0 00147.988 0zm-8.134 160.2H60.146a4.026 4.026 0 01-3.486-2.012L16.806 89.154a4.025 4.025 0 010-4.025L56.66 16.1a4.024 4.024 0 013.486-2.013h79.708a4.024 4.024 0 013.486 2.013l39.854 69.029a4.025 4.025 0 010 4.025l-39.854 69.03a4.026 4.026 0 01-3.486 2.016z"/>
<path class="hex__shadow" d="M199.461 85.129l-15.687-27.17L143.268 16.2l-.012.021L183.2 85.14a4 4 0 010 4.006l-39.849 69.02a4 4 0 01-3.516 2l-82.1-1.079 17.944 15.2h72.306a4.025 4.025 0 003.485-2.013l47.988-83.117a4.025 4.025 0 00.003-4.028z"/>
<path class="hex__center" d="M139.854 14.087H60.146A4.024 4.024 0 0056.66 16.1L16.806 85.129a4.025 4.025 0 000 4.025l39.854 69.03a4.026 4.026 0 003.486 2.012h79.708a4.026 4.026 0 003.486-2.012l39.854-69.03a4.025 4.025 0 000-4.025L143.34 16.1a4.024 4.024 0 00-3.486-2.013z"/>
</svg>
</div>
<div class="hex hex--tertiary">
<span class="hex__heading">03</span>
<svg class="hexagon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 174.284">
<path class="hex__stroke" d="M147.988 0H52.012a4.024 4.024 0 00-3.485 2.012L.539 85.129a4.025 4.025 0 000 4.025l47.988 83.117a4.025 4.025 0 003.485 2.013h95.976a4.025 4.025 0 003.485-2.013l47.988-83.117a4.025 4.025 0 000-4.025L151.473 2.012A4.024 4.024 0 00147.988 0zm-8.134 160.2H60.146a4.026 4.026 0 01-3.486-2.012L16.806 89.154a4.025 4.025 0 010-4.025L56.66 16.1a4.024 4.024 0 013.486-2.013h79.708a4.024 4.024 0 013.486 2.013l39.854 69.029a4.025 4.025 0 010 4.025l-39.854 69.03a4.026 4.026 0 01-3.486 2.016z"/>
<path class="hex__shadow" d="M199.461 85.129l-15.687-27.17L143.268 16.2l-.012.021L183.2 85.14a4 4 0 010 4.006l-39.849 69.02a4 4 0 01-3.516 2l-82.1-1.079 17.944 15.2h72.306a4.025 4.025 0 003.485-2.013l47.988-83.117a4.025 4.025 0 00.003-4.028z"/>
<path class="hex__center" d="M139.854 14.087H60.146A4.024 4.024 0 0056.66 16.1L16.806 85.129a4.025 4.025 0 000 4.025l39.854 69.03a4.026 4.026 0 003.486 2.012h79.708a4.026 4.026 0 003.486-2.012l39.854-69.03a4.025 4.025 0 000-4.025L143.34 16.1a4.024 4.024 0 00-3.486-2.013z"/>
</svg>
</div>
I'd recommend using linearGradient
: https://jsfiddle.net/um4yhrxj/
I won't do all the work for you though, haha!