如何在六边形的右侧添加彩色阴影？

Question

谢天谢地，我在 SO 上找到了一个六边形，但现在我遇到了问题。 六边形可以用任何颜色填充——目前是橙色，但我需要用颜色和阴影填充它：

 <svg viewBox="0 0 180 100" style="width:180px;height:130px"> <defs> <clipPath id="hexagon_clip"> <path id="hexagon" d="M38,2 L82,2 A12,12 0 0,1 94,10 L112,44 A12,12 0 0,1 112,56 L94,90 A12,12 0 0,1 82,98 L38,98 A12,12 0 0,1 26,90 L8,56 A12,12 0 0,1 8,44 L26,10 A12,12 0 0,1 38,2" /> </clipPath> </defs> <use xlink:href="#hexagon" x="0" y="0" stroke="orange" stroke-width="12" fill="transparent" /> </svg>

这是我要重新构建的当前示例：

所以我的目标是在最后传递一个颜色的十六进制代码。 这可能吗？

彩色阴影是指每个六边形右侧的较暗颜色。 抱歉不清楚！

Answer 1

我将考虑取自这个答案的不同六边形，然后作为背景颜色，我将使用两层，主色和渐变来模拟阴影：

 .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>

Answer 2

我的方法 - 创建一个通用 SVG 并使用 CSS 更改 colors：

代码笔： 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>

Answer 3

我建议使用linearGradient ： https://jsfiddle.net/um4yhrxj/

不过我不会为你做所有的工作，哈哈！