Html 角化、剪裁、边缘，但仅在底部2和平滑包装上

发布于11月16日

所以上面的图片就是我想要实现的.这就是我得到的:

我的问题是我不能让上面的边缘正确地包裹在一起，它们感觉太锋利了.我经常使用clip-path，但我不确定clip-path是不是最好的方法，或者是否有更好的方法.

  .center-nav-menu {
    width: 15rem;
    overflow:hidden;
    clip-path: polygon(0 0, 100% 0, 100% 25%, 75% 100%, 25% 100%, 0 25%)
  }

  .button-default {
    color: white;
    text-align: center;
    text-transform: uppercase;
    padding: 9px 14px;
    display: inline-block;
    border-radius: 8px;
    background-color: #565565;
  }

这个html只是一个基本的

  <div :class="itemClasses">
    <span>{{ label }}</span>
  </div>

有谁有什么链接或建议吗？剪辑路径是正确的方式吗？我也想过用背景图片来"伪装"它.但只是想要一些建议.谢谢

推荐答案

我会考虑将倾斜变换应用于伪元素

button {
  --r: .7em; /* the radius */
  --a: 10deg; /* the curvature */

  padding: .6em 1.5em;
  font-size: 30px;
  border: none;
  background: none;
  position: relative;
  z-index: 0;
  color: #fff;
}
button:before,
button:after {
  content: "";
  position: absolute;
  z-index: -1;
  inset-block: 0;
  width: 50%;
  background: red content-box; /* background color */
  border: 2px solid red; /* border */
  padding: 5px; /* space between border and background*/
  transform-origin: top;
}
button:before {
  left: 0;
  border-right: 0;
  transform: skewX(var(--a));
  border-radius: var(--r) 0 0 var(--r);
}
button:after {
  right: 0;
  border-left: 0;
  transform: skewX(calc(-1*var(--a)));
  border-radius: 0 var(--r) var(--r) 0;
}

<button>Play</button>

Html相关问答推荐

如何增加行背景的宽度而不影响上面的内容？""' HTML CSS

如何在不影响子列表的情况下在HTML(OL Li)上同时加数字和列表？

Html 角化、剪裁、边缘，但仅在底部2和平滑包装上

推荐答案

Html相关问答推荐

如何增加行背景的宽度而不影响上面的内容？""' HTML CSS

如何在不影响子列表的情况下在HTML(OL Li)上同时加数字和列表？

如何在div中淡入和淡出渐变背景？

Angular 15 p-对话框不使用组件 Select 器呈现HTML

在<；style&>中列出的三种字体中，只有两种显示

尽管div高度为100%，div中的内容仍会溢出

如何使用*ngFor将模板从父级传递到子级

CSS 伪类 Select 器未按预期工作

：invalid Select 器的惰性判断

如何在Rmarkdown中添加千位分隔符？

从垫分页器中删除输入边框

单击时 HTML 锚元素不重定向到相对路径

如何为某些行具有 rowspan 的表的每个奇数行着色

如何在没有容器的情况下沿基线将 div 中的元素居中？

鼠标悬停时切换 colored颜色的双色链接

我用 ejs 修复了一个奇怪的语法错误，我想知道问题出在哪里

Tailwind CSS 复选框样式不起作用

每次按下按钮时减小字体大小的 jquery 函数

另一个 flex 元素之间的 CSS 空间

有没有办法在 CSS 类子句中指定多个 HTML 元素？