Html CSS：按钮上的角度

我的应用程序中有基本的方形按钮：

我想对按钮集合进行如下设计：

我不知道你怎么能得到每一个酒吧顶部的角度。当前方形按钮CSS：

   .button {
      display: inline-block;
      text-align: center;
      line-height: 1;
      cursor: pointer;
      -webkit-appearance: none;
      transition: background-color 0.25s ease-out, color 0.25s ease-out;
      vertical-align: middle;
      border: 1px solid transparent;
      border-radius: 0;
      padding: 0.85em 1em;
      margin: 0 0 1rem 0;
      font-size: 0.9rem;
      background-color: #2199e8;
      color: #fefefe; }
      [data-whatinput='mouse'] .button {
        outline: 0; }

.button.tiny {
    font-size: 0.6rem; }

---

感谢您的指导。

您可以使用。制作此三角形设计的基础是：

.stack{
浮动：左；
右边距：2px；
}
.空白{
宽度：40px；
高度：40px；
}
.街区{
宽度：40px；
高度：40px；
背景颜色：蓝色；
}
崔先生{
宽度：0px；
高度0px；
左边框：20px实心透明；
边框顶部：20px实心透明；
右边框：20px纯蓝；
边框底部：20px纯蓝；
}

---

您可以通过使用来实现这一点。制作此三角形设计的基础是：

.stack{
浮动：左；
右边距：2px；
}
.空白{
宽度：40px；
高度：40px；
}
.街区{
宽度：40px；
高度：40px；
背景颜色：蓝色；
}
崔先生{
宽度：0px；
高度0px；
左边框：20px实心透明；
边框顶部：20px实心透明；
右边框：20px纯蓝；
边框底部：20px纯蓝；
}

---

您可以将每个按钮定义为一个按钮，只需将标签放置在按钮上，而无需将它们制作成多块

注意，为了便于维护（和设置），此实现大量使用CSS变量。IE、Microsoft Edge和Opera Mini（目前）不支持它们（大约2017年1月）

这种方法的一个缺点是很难获得背景的非纯色，因为需要将除右侧边界外的所有边界指定为透明。这应该可以通过SVG实现，但是没有它，简单的渐变是不可能的。另一个是任何轮廓效果（

轮廓

，

框阴影

等）都不会“尊重”梯形形状，而是会围绕整个矩形绘制

此外，从用户体验的角度来看，第一个按钮的可点击区域有些小。我把解决这个问题留给用户

.btnset{
显示器：flex；
调整内容：灵活启动；
对齐项目：柔性端；
/*钮扣尺寸*/
--高度每：36px；/*高度随位置增加多少*/
--每根钢筋的宽度：75px；/*每根钢筋的宽度*/
/*标签定位*/
--底部prc:0.45；/*偏移标签的高度百分比*/
--底部偏移：19px；/*要偏移的平面修改器*/
--底部第一个偏移量：15px；/*第一个按钮的偏移量*/
--左prc:0.45；/*偏移标签的宽度百分比*/
--左偏移：0px；/*要偏移的展开修改器*/
--左第一偏移量：9px；/*第一个按钮的偏移量*/
/*着色和字体大小*/
--bgc:#000；
--字体颜色：#fff；
--字号：12号；
/*悬停效果*/
--悬浮生长：15px；
--悬停bgc:#333；
}
.btnset按钮{
--btn num:1；/*用于缩放后面的按钮*/
--heightmod:0px；/*用于悬停效果*/
显示：内联块；
位置：相对位置；
右边距：1px；
/*取消设置按钮默认值*/
填充：0；
宽度：0；
背景：无；
光标：指针；
/*创建三角形顶部零件*/
边框样式：实心；
边框颜色：透明var（--bgc）透明透明；
边框宽度：var（--height per）var（--width per）0；
/*创建垂直条零件*/
高度：计算值（计算值（var（--height per）*var（--btn num））+var（--heightmod））；
/*悬停效果*/
页边距顶部：var（--悬停增长）；/*悬停增长的占位符*/
过渡时间：300毫秒；
}
.btnset按钮div{
显示：块；
位置：绝对位置；
颜色：var（--字体颜色）；
字体大小：var（--字体大小）；
/*根据按钮的可见大小缩放按钮标签的位置*/
底部：计算值（计算值（计算值（var（--每高度）*var（--btn数值））*var（--底部prc））-var（--底部偏移量））；
左：计算值（计算值（var（--每小时宽度）*var（--左prc））+var（--左偏移量））；
}
.btnset按钮：悬停{
--heightmod:var（--hover-grow）；
边际上限：0px；
右边框颜色：var（--悬停bgc）；
}
/*实例。第一个有不同的标签偏移，其余的只需要知道它们的编号*/
.btnset按钮：第n个子项（1）{
--btn数：1；
--左偏移量：var（--左第一偏移量）；
--底部偏移量：var（--底部第一偏移量）；
}
.btnset按钮：第n个子（2）{--btn num:2；}
.btnset按钮：第n个子（3）{--btn num:3；}
.btnset按钮：第n个子（4）{--btn num:4；}
.btnset按钮：第n个子（5）{--btn num:5；}
.btnset按钮：第n个子（6）{--btn num:6；}
.btnset按钮：第n个子（7）{--btn num:7；}
.btnset按钮：第n个子（8）{--btn num:8；}
.btnset按钮：第n个子（9）{--btn num:9；}

1.
2.
3.
4.
5.
6.

您可以将每个按钮定义为一个按钮，只需将标签放置在按钮上，而无需将它们制作成多块

注意，为了便于维护（和设置），此实现大量使用CSS变量。IE、Microsoft Edge和Opera Mini（目前）不支持它们（大约2017年1月）

这种方法的一个缺点是很难获得背景的非纯色，因为需要将除右侧边界外的所有边界指定为透明。这应该可以通过SVG实现，但是没有它，简单的渐变是不可能的。另一个是任何轮廓效果（

轮廓

，

框阴影

等）都不会“尊重”梯形形状，而是会围绕整个矩形绘制

此外，从用户体验的角度来看，第一个按钮的可点击区域有些小。我把解决这个问题留给用户

.btnset{
显示器：flex；
证明内容：f