Question

我正在尝试创建六边形的按钮，这些按钮在我使用剪切路径创建的六边形周围具有透明的背景和白色的1px实心边框。但是，当我应用边框时，它的一部分会被切除。如何获得这种外观？

这是我的代码：

  .project-button div{
      position: relative;
      display: inline-block;
      padding: 1rem;
      margin: 0 1rem 1rem 1rem;
      
      color: #d9d9d9;
      font-size: 1rem;
      font-weight: 700;
      border: 1px solid white;
    
      -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%);
      
     
      background-repeat: no-repeat;
      transition: background-size .5s, color .5s;
    }
    
    .to-top {
        background-position: 50% 100%;
        background-size: 100% 0%;
      }
    
    .project-button div:hover {
        background-size: 100% 100%;
        background-image: linear-gradient(white, white);
        color: #51d0de;
    }

<div class="project-button">
   <div class="to-top>View Code"></div>
</div>

Answer 1

这是我到目前为止所要做的，
我用过 filter：drop-shadow（）

对于透明背景，您可以使用与父级相同的颜色

.hexagon{
  background: white;/*giving color is important*/
  padding: 40px;
  width: 20%;
  text-align: center;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}
/* main code */
.container{
  filter: drop-shadow(0px 0px 1px black);
}

  <div class="container">
    <div class="hexagon">Button</div> 
  </div>

希望对您有帮助。

注意：过滤器用于父div。

如何在剪切路径形状周围制作边框？

1 个答案: