时间戳

首页 > 解决方案 > How to make a border around clip path shape?

html - How to make a border around clip path shape?

问题描述

I am trying to create hexagon shaped buttons that have a transparent background and white 1px solid border around the hexagon I created with clip path. However, when I apply a border part of it is cut off. How can I achieve this look?

Here is my code:

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

标签： htmlcss

解决方案

这就是我到目前为止所得到的，
我使用了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。

推荐阅读