CSS按钮 - 两侧透明箭头

时间:2016-08-23 15:30:57

标签: css less css-shapes

我正在尝试使用之前和之后的伪元素创建下面的按钮。 我不想操纵HTML DOM。我正在寻找纯CSS的解决方案。

enter image description here

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

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

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

enter image description here

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

The border-width changes depending on the zoom level of the browser

有没有办法修复三角形的边框宽度(左边和右边)? 在这里你可以看到尺寸如何变为14.4和26.4px,26.4px: enter image description here

2 个答案:

答案 0 :(得分: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>

我意识到结尾不是真的透明,它们只是将背景颜色与显示透明相匹配。

答案 1 :(得分:1)

最好的解决方案是反转三角形(这样你就可以添加与按钮匹配的顶部和底部三角形,但不能在两侧添加)。你可以在技术上使透明&#34;三角形,但你不能将透明度应用于不同的对象。

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

如果您使用以下内容替换所有关于按钮的CSS,那么您将拥有一个至少可以获得90%的解决方案。这个角度并不完美,因为它停在文本上。如果你想让角度真正完美,你可能需要做一些绝对定位,这会让你的按钮尺寸发生变化时变得混乱。

你也可以实现这一点的非代码方式是创建一个.png或.svg,其中的三角形与按钮的颜色相匹配,并将它们插入:before和:after with content:&#39; &#39 ;;

&#13;
&#13;
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;
}
&#13;
<div class="btn">Text in my little banner button</div>
<div class="btn inset">Text in my little banner button</div>
&#13;
&#13;
&#13;