在有角的顺风元素后添加三角形形状。

Question

我试图为肚脐重新设计这个设计。

​

但我想不出一个合适的方法来增加三角形的形状。

我现在拥有的是：

​

<!-- Navbar Logo Space  -->
<div>
    <div id="navbar-logo" class="z-0 inset-1.5 absolute bg-light-green w-1/4 h-24">
      <div class="hidden md:flex flex items-center space-x-1">
          <!-- logo  -->
          <a href="#" class = "py-5 px-2" >LOGO</a>

          <!-- title  -->
          <a href="#" class = "py-5 px-2">PLACEHOLDER</a>
      </div>
    </div>

</div>

我可以使用以下内容添加一个三角形：

#navbar-logo::after {
    content: '';

    background: #06C982;
    
    position: absolute;
    
    top: 0;
    z-index: 10;
    
    left: 27em;
    
    width: 10em;;
    
    height: 99%;
    
    transform: skewX(-38deg);
}

但它是固定的，它引起问题的反应能力。

有什么有效的方法吗？可能是顺风。

Answer 1

最简单的方法是使用CSS clip-path。有一些在线生成器可以为您做到这一点，但是这里有一个在响应时应该工作的代码片段：

clip-path: polygon(0% 0%, 100% 0%, 80% 100%, 50% 100%, 0% 100%);

要更改角度，只需更改代码段中的80%值即可。我确实强烈推荐学习剪辑路径，这是一个非常有用的工具，独特的CSS。

Answer 2

这里有一个非常简单的例子(CSS)，在元素之后添加等边三角形。

​

#navbar-logo {
  position: relative;
  display: inline-block;
  width: fit-content;
  height: fit-content;
  padding: 0px;
  overflow;
  visible;
  background: #06C982;
  padding: 10px;
  box-sizing: border-box;
}

#navbar-logo::after {
  content: '';
  background: inherit;
  height: 100%;
  aspect-ratio: 1 / 1;
  position: absolute;
  top: 0;
  left: 100%;
  clip-path: polygon(0 0, 100% 0, 0 100%);
}

<!-- Navbar Logo Space  -->
<div>
  <div id="navbar-logo">
    <div>
      <!-- logo  -->
      <a href="#">LOGO</a>

      <!-- title  -->
      <a href="#">PLACEHOLDER</a>
    </div>
  </div>

</div>

​

它使用剪辑路径形成三角形，但请注意，它确保高度和宽度相等，所以它总是一个45度的三角形。

在整个实际元素上使用多边形剪辑路径的问题是，根据元素的尺寸，角度最终会发生变化，因此在这个意义上它不会有响应。