带有重叠角的对角形状按钮

Question

我需要知道如何使用css或仅创建图像切片来实现此目的。看到附图，按钮是对角线的，如果我切一个按钮，它的一角就会与另一个按钮重叠。我不确定我怎么能做到这一点。有人可以建议。我需要做到这一点，所以它与IE 8兼容。

谢谢！

Answer 1

请在此处查看此代码段。它详细解释了我认为你想要实现的目标。 http://codepen.io/chriscoyier/pen/Civzw

Answer 2

这是一个基本的例子。

我使用transform:skew(30deg);和:after伪元素。

jsFiddle here

HTML - 非常简单

<div></div>
<div></div>
<div></div>

<强> CSS

div {
    width:100px;
    height:40px;
    background-color:blue;
    border:1px solid black;
    -webkit-transform:skew(30deg);
    -moz-transform:skew(30deg);
    -o-transform:skew(30deg);
    transform:skew(30deg);
    display:inline-block;
    margin:10px;
}
div:after {
    content:'';
    height:100%;
    width:2px;
    position:relative;
    left:110px;
    background:black;
    display:inline-block;
}

Answer 3

或者没有歪斜并在两端使用伪元素。

Codepen Example

div {
  height:50px;
  width:125px;
  background:red;
  position:relative;
}

div:after {
  position:absolute;
  right:-50px;
  content:"";
  border-top:25px solid transparent;  
  border-right:25px solid transparent;
  border-bottom:25px solid blue; /* change as required */
  border-left:25px solid blue; /* change as required */
}

div:before {
  position:absolute;
  content:"";
  left:-50px;
  border-top:25px solid green; /* change as required */
  border-right:25px solid green; /* change as required */
  border-bottom:25px solid transparent;
  border-left:25px solid transparent;
}