CSS按钮 - 两侧都有透明箭头 [英] CSS button - transparent arrow on both sides

问题描述

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

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

// EDIT：

// EDIT2：是我现在使用的解决方案的另一个问题：

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

解决方案

最好的解决方案是颠倒三角形（所以你添加的顶部和底部的三角形匹配按钮，但不是在两侧）。你可以在技术上制作透明三角形，但是你不能将透明度应用于不同的对象。

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

如果你用下面的按钮替换所有的CSS按钮，你会有一个解决方案，让你至少90％的那里。角度不完美，因为它停在文本。如果你想让角度真正完美，你可能需要做一些绝对的定位，这会让你的按钮大小变化凌乱。

您还可以实现这一点的非代码方法是创建一个.png或.svg，其中三角形与您的按钮的颜色匹配，并将它们插入到：before和：after后的内容：'';

  body {margin：20px;背景：＃c2c2c2; } .btn {display：inline-block; text-shadow：0 1px 0＃000; font-weight：bold; text-transform：uppercase;}。btn {padding：11px 40px; color：#fff;位置：相对; 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>在小横幅按钮中的文字< / div>< div class =btn inset>在小横幅按钮中的文字< / div>  / div> 

I am trying to create the button below by using the pseudo-elements before and after. I do not want to manipulate the HTML DOM. I'm searching for a solution with pure CSS.

How is it possible to make the currently white border-color of these triangles transparent?

//EDIT: The marked topic does not answer my question because I need a different angle than just rotating a square. It is also not transparent. I don't want to manipulate the DOM.

//SOLVED: This is the result after using Kate Millers solution:

//EDIT2: There is another problem with the solution I use now:

Is there a way to fix the border-width of the triangles (left and right)? Here you can see how the size changes to 14.4 and 26.4px, 26.4px:

解决方案

The best solution is to reverse the triangles (so you're adding top and bottom triangles that match the button, but not on the sides). You can technically make "transparent" triangles, but you can't have that transparency apply to a different object.

One of the most important things I changed was that the background color and padding of the button has to apply to the span element (which means each button will need an interior span), not .btn.

If you replace all of your CSS about the buttons with the below, you'll have a solution that gets you at least 90% of the way there. The angle isn't perfect because it's stopping at the text. If you want to make the angle truly perfect, you'll probably need to do some absolute positioning, which would make it messy as your button sizes change.

The non-code way you can also achieve this is to create a .png or .svg with triangles that match the color of your button and insert them into the :before and :after with content: ' ';

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按钮 - 两侧都有透明箭头的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！