Trying to make a 'cut' button pairing - css

Question

I need to make two buttons that are grouped and look similar to this..
------------------
| / |
| btn / btn |
| / |
------------------
Except I'm completely stuck and have no idea how to do this even on a theoretical level.
Here's my codepen I'm working on http://codepen.io/robguy21/pen/ONEzpb
I don't know how much help that will be though

Answer 1

edit: you are right this is a better option: http://codepen.io/radvic/pen/aNKKMJ
%btn-reset {
position: relative;
display: inline-block;
background-image: none;
background-color: transparent;
text-align: center;
line-height: normal;
vertical-align: middle;
height: auto;
margin: 0;
padding: 0;
border: 0;
white-space: nowrap;
&:active,
&:focus { outline:none;}
}
$btnHeight: 45px;
button {
#extend %btn-reset;
}
.btn-group {
position: relative;
width: 150px;
height: $btnHeight;
overflow:hidden;
}
%btn-cont {
position: absolute;
width: 50%;
height: 100%;
display: inline-block;
}
.btn-cont--one {
#extend %btn-cont;
background-color: red;
left: 0;
}
.btn-cont--two {
#extend %btn-cont;
background-color: green;
left: 50%;
}
%btn {
position: absolute;
width: 200%;
left: -50%;
top: -50%;
z-index: 5;
height: 200%;
transform: rotate(-60deg);
display: block;
transform-origin: 50% 50%;
&:hover {
background-color: red;
}
}
.one {
#extend %btn;
background-color: #78a44b;
z-index: 10;
margin-left:-18%;
text-indent:18%;
}
.two {
#extend %btn;
background-color: #84caab;
z-index: 5;
margin-left:18%;
text-indent:-18%;
overflow: hidden;
}
button > span{
display: block;
transform: rotate(60deg);
transform-origin: 50% 50%;
}
I'll leave the original link for reference.
original try:
ok this is probably not the most elegant way of doing it as specially as it involves a negative z-index but here it goes:
http://codepen.io/radvic/pen/yOEvNw

Answer 2

You can try something like this, i am create a JSFIDDLE for you
.second{
border-bottom: 100px solid red;
border-left: 60px solid transparent;
border-right: 0px solid transparent;
height: 0;
width: 100px;
float:right;
margin-top:-100px;
}
.first{
border-top: 100px solid green;
border-left: 0px solid transparent;
border-right:60px solid transparent;
height: 0;
width: 100px;
float:left;
}
Just check it out this link JSFIDDLE