Div 带有边框并在 CSS 或 SVG 中剪裁右上角

Question

我正在尝试实现以下菜单：

到目前为止，我有这个：

我怎样才能达到 clipped/diagonal 个角？

这是我的 HTML/Twig:

<div class="genre-nav uni-font p-0 row">
{% for genre in genres %}
    {% if loop.first %}
        <div class="white-bg col genre text-center">
            <a href="/">New Releases</a>
        </div>
    {% endif %}
    <div class="white-bg col genre text-center">
        <a href="{{ genre.url }}">{{ genre.title }}</a>
    </div>
    {% if loop.last %}
        <div id="show-less" class="white-bg col col-12 text-center">
            <span>Less &#x2934;</span>
        </div>
    {% endif %}
{% endfor %}
 </div>

和CSS：

<style>
    header .genre-nav {
      visibility: hidden;
      font-size: 1.1rem;
      top: -2px;
      left: 0;
      overflow: hidden;
      padding-top: 3px !important;
      padding-left: 3px !important;
      height: 2.42rem;
    }

    header .genre-nav .col {
      padding: 0.08rem 0.8rem;
      border: 3px solid #000000;
      margin: -3px 0 0 -3px;
      white-space: nowrap;
    }

    header .genre-nav .col:hover {
      background: #3FCECC;
    }

    header .genre-nav .col a {
      color: #000000;
    }

    header .genre-nav .col a:hover {
      text-decoration: none;
    }

    header .genre-wrap.more .genre-nav {
      height: auto;
    }

    @-webkit-keyframes show-more {
      0% {
        background-color: #FFFFFF;
      }
      50% {
        background-color: #3FCECC;
      }
    }

    #show-more, #show-less {
      cursor: pointer;
      -webkit-animation-name: show-more;
      -webkit-animation-duration: 900ms;
      -webkit-animation-iteration-count: infinite;
      -webkit-animation-timing-function: ease-in-out;
    }
 </style>

Answer 1

这里有一种使用 SVG 的方法：

将您的物品按相反的顺序放入。

"d" 每个路径的属性："M {100 * index},0 H {100 * (index+1)} L {100 * (index+1 ) + 10},10 V 30 H {100 * 指数} Z"

"x" 每个文本的属性：{index * 100 + 25}（第一个除外）

<svg width="400">
  <path d="M 200,0 H 300 L 310,10 V 30 H 200 Z" fill="#fff" stroke="#000" />
  <text x="225" y="20">Rock</text>
  <path d="M 100,0 H 200 L 210,10 V 30 H 100 Z" fill="#fff" stroke="#000" />
  <text x="125" y="20">Gospel</text>
  <path d="M 0,0 H 100 L 110,10 V 30 H 0 Z" fill="#fff" stroke="#000" />
  <text x="10" y="20">New Releases</text>
 </svg>

Div 带有边框并在 CSS 或 SVG 中剪裁右上角

Div with borders and clipped top right corner in CSS or SVG

html

css

svg

border