Question

我需要制作两个分组的按钮，看起来与此相似..

     ------------------
     |        /       |
     |  btn  /   btn  |
     |      /         |
     ------------------

除非我完全陷入困境，即使在理论层面也不知道如何做到这一点。

这是我的codepen我正在研究http://codepen.io/robguy21/pen/ONEzpb

我不知道会有多少帮助

Answer 1

编辑：你说得对，这是一个更好的选择：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%;
}

我将保留原始链接以供参考。

原创尝试： 确定这可能不是最优雅的方式，因为它涉及负z-index，但在这里： http://codepen.io/radvic/pen/yOEvNw

Answer 2

你可以尝试这样的东西，我为你创建一个JSFIDDLE

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

只需查看此链接JSFIDDLE

即可

试图做一个“剪切”按钮配对

2 个答案: