CSS 按钮 - 两侧透明箭头

Question

我试图通过使用前后的伪元素来创建下面的按钮。 我不想操作 HTML DOM。我正在寻找纯 CSS 的解决方案。

如何使这些三 Angular 形当前的白色边框颜色变得透明？

//编辑: marked topic没有回答我的问题，因为我需要一个不同的 Angular ，而不仅仅是旋转一个正方形。它也不透明。我不想操纵 DOM。

//已解决:这是使用 Kate Millers 解决方案后的结果:

//EDIT2:我现在使用的解决方案还有另一个问题:

有没有办法固定三 Angular 形(左和右)的边框宽度？ 这里你可以看到尺寸如何改变为14.4和26.4px，26.4px:

Answer 1

最好的解决方案是反转三 Angular 形(因此您要添加与按钮匹配的顶部和底部三 Angular 形，但不在侧面)。从技术上讲，您可以制作“透明”三 Angular 形，但不能将该透明度应用于不同的对象。

我更改的最重要的事情之一是按钮的背景颜色和填充必须应用于 span 元素(这意味着每个按钮都需要一个内部 span)，而不是 .btn。

如果您用下面的代码替换所有关于按钮的 CSS，您将获得一个至少可以完成 90% 的解决方案。这个 Angular 并不完美，因为它停在了文字处。如果你想让 Angular 真正完美，你可能需要做一些绝对定位，这会随着按钮尺寸的变化而变得困惑。

您也可以实现此目的的非代码方法是创建一个带有与按钮颜色匹配的三 Angular 形的 .png 或 .svg 并将它们插入到 :before 和 :after 中，内容为: ' ';

body { margin: 20px; background:#c2c2c2; }

.btn {
  display: inline-block;
  text-shadow: 0 1px 0 #000;
  font-weight: bold;
  text-transform: uppercase;
}

.btn {
  padding: 11px 40px;
  color: #fff;
  position: relative;
  background: #a00;
}

.btn:before, .btn:after {
  content: '';
  border-top: 20px solid #a00;
  border-bottom: 20px solid #a00;
  position: absolute;
  top: 0;
}

.btn:before {
  border-left:20px solid transparent;
  left: -20px;
}

.btn:after {
  border-right:20px solid transparent;
  right:-20px;
}


.btn.inset:before, .btn.inset:after {
  content: '';
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  position: absolute;
  top: 0;
}

.btn.inset:before {
  border-right:20px solid #a00;
  left: -40px;
}

.btn.inset:after {
  border-left:20px solid #a00;
  right:-40px;
}

<div class="btn">Text in my little banner button</div>
<div class="btn inset">Text in my little banner button</div>