如何在斜线之间制作2个div

Question

我想制作一个像图片一样的菜单，但我不知道如何剪切这两个div并使其可点击。

我尝试过使用svg和divs的边框，但是我无法将div和svg放在一起，因为＆＃34;大纲＆＃34;还是一个矩形！

此链接上的图像示例：
http://postimg.org/image/ffp6g83fd/537cb837/

I only can make this :
********|   *****
******* |  ******
******  | *******
*****   |********

and I want :

******** *****
******* ******
****** *******
***** ********

并使其可点击

这是基于Hugo Marabutt Nogueira回答的结果

http://jsfiddle.net/L7PL4/

Answer 1

这是一种方法，没有太多的额外残余。这使用边框和一些css变换来制作角度。

<强> JSFiddle

<强> CSS

* {
    padding: 0;
    margin: 0;
}
.container {
    width: 100%;   
    height: 50px;
}
.left,
.right {
    float: left;
}

.left span,
.right span {
    position: absolute;
    line-height: 50px; // equal to height of element
}

.left {
    width: 25%; // change as needed
    border-bottom: 50px solid blue;
    border-right: 50px solid transparent;
    -webkit-transform: rotateX(180deg);
}

.left span {
    width: 100%;
    text-align: center;
    -webkit-transform: rotateX(-180deg); // opposite of skew
}

.right {
    width: 25%;
    border-bottom: 50px solid green;
    border-right: 50px solid transparent;
    -webkit-transform: rotate(180deg) rotateX(180deg);
}

.right span {
    width: 100%;
    text-align: center;
    -webkit-transform: rotate(-180deg) rotateX(-180deg);
}

只需确保通过使用相反的变换来解开文本。您还必须使用所有适当的供应商前缀进行转换。

Answer 2

您可以使用负边距使元素重叠。例如：

margin-right: -5px;

Answer 3

您可以使用CSS3 Transitions来实现该形状，然后将js点击绑定到它们。

像这样：

http://cdpn.io/stHdg

.skew{
  background-color: #333;
  width:150px;
  height:75px;
  float:left;
  position:relative;
  margin-left:100px;
  margin-top:50px;
  cursor:pointer;
}
.a:before{
    content:"";
    position:absolute;
    background: #333;
    top:0;
    left:-25px;
    bottom: 0;
    width: 50px;
    -webkit-transform: skew(-20deg);
    -moz-transform: skew(-20deg);
    -ms-transform: skew(-20deg);
    transform: skew(-20deg);
}
.b:after{
    content:"";
    position:absolute;
    background: #333;
    top:0;
    right:-25px;
    bottom: 0;
    width: 50px;
    -webkit-transform: skew(-20deg);
    -moz-transform: skew(-20deg);
    -ms-transform: skew(-20deg);
    transform: skew(-20deg);
}