Question

是否可以创建一个如上图所示的梯形按钮？我搜索了网络，但无法找到任何显示边框的解决方案。

编辑：似乎我的问题不清楚或者还没有被充分理解。无论如何，其他线程只显示如何通过连接2个元素来创建梯形，但是如何在其上添加边框？

Answer 1

＆＃13;

.trapezoid {
  width: 230px;
  text-align: center;
  height: 0; 
  position: relative;
  border-right: 50px solid transparent;
  border-top: 40px solid #2963BD;
  border-left: 50px solid transparent;
  box-sizing: content-box;
}
.trapezoid span { 
  position: absolute;
  top: -30px;
  left: 25%;
  color: #fff;
}

＆＃13;

<div class="trapezoid"><span>Trapezoid Button</span></div>

＆＃13;

Answer 2

请尝试以下代码：

选项1：PURE CSS

这种方法的逻辑是添加一个粗边框底部和一个厚透明边框 - 右边以实现标签效果;

PROS：非常简单的造型，非常容易理解。
缺点：在定制方面非常有限（即无法在标签上添加边框）

＆＃13;

.tabs {
  display: flex;
  flex-direction: row;
}

.tab {
    height: 0;
    width: 120px;
    border-bottom: 50px solid #CCCCCC;
    border-right: 20px solid transparent;
    border-top-left-radius: 5px;
    box-sizing: border-box;
    display: block;
}

.tab:not(:first-child) {
    margin-left: -10px;
    z-index: 0;
}

.tab .label{
  padding: 15px;
  text-align: center;
  color: #444444;
}

.active {
  border-bottom: 50px solid #444444;
  z-index: 10;
}
.active .label{
  color: #ffffff;
}

＆＃13;

<div class="tabs">
<div class="tab active"><div class="label">TAB 1</div></div>
<div class="tab"><div class="label">TAB 2</div></div>
<div class="tab"><div class="label">TAB 3</div></div>
</div>

＆＃13;

选项2：使用SVG作为选项背景

这种方法的逻辑是使用两个单独的矢量图像（svg）作为内联背景图像：

PROS：非常可定制;可以为标签添加边框，可以添加渐变背景到标签。
CONS：需要有关svg的基本知识。

＆＃13;

.tabs {
  display: flex;
  flex-direction: row;
  overflow: visible;
  padding-left: 15px;
}

.tab {
    height: 0;
    width: 130px;
    height: 38px;
    margin-left: -15px;
    z-index: -1;
    cursor: pointer;
    background-size: contain;
    background: transparent url("data:image/svg+xml;utf8,<svg   xmlns='http://www.w3.org/2000/svg' width=\"121px\" height=\"38px\" viewBox=\"0 0 121 38\"><path d=\"M0.786477689,37.3880765 L0.786477689,5 L0.786477689,5 C0.786477689,2.790861 2.57733869,1 4.78647769,1 L102.838012,1 L102.838012,1 C104.471746,1 105.941285,1.99354246 106.549997,3.50964209 L120.152151,37.3880765 L0.786477689,37.3880765 Z\" stroke=\"#979797\" fill=\"#F0F0F0\"></path></svg>") no-repeat;
}

.tab .label{
  box-sizing: border-box;
  padding: 12px;
  text-align: center;
  color: #444444;
  font: 13px arial, sans-serif;
  width: 90%;
}

.active {
  background: transparent url("data:image/svg+xml;utf8,<svg   xmlns='http://www.w3.org/2000/svg' width=\"121px\" height=\"38px\" viewBox=\"0 0 121 38\"><path d=\"M0.786477689,37.3880765 L0.786477689,5 L0.786477689,5 C0.786477689,2.790861 2.57733869,1 4.78647769,1 L102.838012,1 L102.838012,1 C104.471746,1 105.941285,1.99354246 106.549997,3.50964209 L120.152151,37.3880765 L0.786477689,37.3880765 Z\" stroke=\"#2D94B5\" fill=\"#2D94B5\"></path></svg>") no-repeat;
  z-index: 10;
}
.active .label{
  color: #ffffff;
}

＆＃13;

<div class="tabs">
<div class="tab"><div class="label">TAB 1</div></div>
<div class="tab"><div class="label">TAB 2</div></div>
<div class="tab active"><div class="label">TAB 3</div></div>
<div class="tab"><div class="label">TAB 4</div></div>
</div>

＆＃13;

如果要更改背景（填充）和边框（笔触）的颜色，只需分析.tab和.active类，查找background属性并搜索/编辑关于内联svg：

表示普通标签：stroke=\"#979797\" fill=\"#F0F0F0\"
表示有效标签：stroke=\"#2D94B5\" fill=\"#2D94B5\"

希望它可以帮到你

Answer 3

.tabButton{
  background: #ff0000;
  width: 100px;
  padding: 5px;
  position: relative;
}

.tabButton:before{
  content: ' ';
  position: absolute;
  top: 8px;
  right: -20px;
  border: 20px solid transparent;
  border-top-color: #ff0000;
  transform: rotate(45deg)
}

<div class="tabButton">
  Navigator
</div>

带有实心边框的CSS Trapezoid按钮

3 个答案: