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

html5 • • 问答

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

<svg viewBox="0 0 180 100">
  <defs>
    <clipPath>
      <path 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>

回答

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

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


<svg width="0" height="0" xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
        <filter><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>

以上是如何在六边形的右侧添加彩色阴影？的全部内容。
THE END
分享
二维码
< <上一篇
下一篇>>
相关内容