html - 具有重叠角的对角线形状按钮

Question

我需要知道如何使用 css 或仅通过创建图像切片来实现这一点。见附图，按钮是对角线的，如果我切一个按钮，它的角会与另一个按钮重叠。我不确定如何实现这一目标。有人可以请教。我需要做到这一点，以便它与 IE 8 兼容。

谢谢！

Answer 1

在此处查看此片段。它详细解释了我认为您正在努力实现的目标。http://codepen.io/chriscoyier/pen/Civzw

Answer 2

这是一个基本的例子。

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

jsFiddle在这里

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

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

代码笔示例

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;
}