CSS 按钮-两侧透明箭头

Question

我正在尝试使用之前和之后的伪元素来创建下面的按钮。 我不想操纵HTMLDOM。我正在寻找纯 CSS.

的解决方案

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

//编辑： marked topic 没有回答我的问题，因为我需要一个不同于旋转正方形的角度。它也不透明。我不想操纵 DOM.

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

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

有没有办法固定三角形（左右）的边框宽度？在这里你可以看到大小如何变化为 14.4 和 26.4px，26.4px：

Answer 1

我不使用，也不太熟悉 LESS...但是您可以使用 span 和带有伪元素的包装器来创建类似的元素。每边确实需要 2 个三角形（因此跨度）。

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

.btn {
  display: inline-block;
  padding: 11px 40px;
  color: #fff;
  position: relative;
  background: #a00;
  text-shadow: 0 1px 0 #000;
  font-weight: bold;
  text-transform: uppercase;
}

.btn:after,
.btn span:after,
.btn:before,
.btn span:before {
  content: "";
  width: 0;
  height: 0;
  display: block;
  position: absolute;
  right: 0;
  border: 10px solid transparent;
}
.btn:after {
  top: 0;
  border-right-color: #ddd;
  border-bottom-color: #ddd;
  }
.btn span:after {
  bottom: 0;
  border-right-color: #ddd;
  border-top-color: #ddd;
}
.btn:before {
  top: 0;
  left:0;
  border-left-color: #ddd;
  border-bottom-color: #ddd;
  }
.btn span:before {
  bottom: 0;
  left:0;
  border-left-color: #ddd;
  border-top-color: #ddd;
}

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

我意识到末端并不是真正透明的，它们只是匹配背景颜色看起来透明。

Answer 2

最好的解决方案是反转三角形（因此您要添加与按钮匹配的顶部和底部三角形，但不在两侧）。从技术上讲，您可以制作 "transparent" 个三角形，但不能将透明度应用于不同的对象。

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

如果您将关于按钮的所有 CSS 替换为以下内容，您将拥有一个至少可以完成 90% 的解决方案。角度并不完美，因为它停在了文本处。如果你想让角度真正完美，你可能需要做一些绝对定位，这会随着按钮大小的变化而变得混乱。

您也可以通过非代码方式实现这一点，即创建一个 .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>

CSS 按钮-两侧透明箭头

CSS button - transparent arrow on both sides

css

less

css-shapes