在css右侧的三角形按钮

Question

我有这个简单的按钮：

＆＃13;

＆＃13;

.btn {
  border-radius: 2px;
  background-image: -moz-linear-gradient( 90deg, rgb(235,235,235) 0%, rgb(254,254,254) 100%);
  background-image: -webkit-linear-gradient( 90deg, rgb(235,235,235) 0%, rgb(254,254,254) 100%);
  background-image: -ms-linear-gradient( 90deg, rgb(235,235,235) 0%, rgb(254,254,254) 100%);
  color: rgb(64, 64, 64);
  text-align: center;
  height: 25px;
  border: 1px solid #d9d9d9;
  vertical-align: middle;
  font-family: "Segoe UI";
  box-shadow: 0px 0px 1px #d9d9d9;
}

＆＃13;

<button class="btn">Some button</button>

＆＃13;

＆＃13;

＆＃13;

现在我想做这样的事情：

Answer 1

它当然不是完美的，但它太糟糕了......

＆＃13;

＆＃13;

.btn {
  border-radius: 2px;
  background-image: -moz-linear-gradient( 90deg, rgb(235,235,235) 0%, rgb(254,254,254) 100%);
  background-image: -webkit-linear-gradient( 90deg, rgb(235,235,235) 0%, rgb(254,254,254) 100%);
  background-image: -ms-linear-gradient( 90deg, rgb(235,235,235) 0%, rgb(254,254,254) 100%);
  color: rgb(64, 64, 64);
  text-align: center;
  height: 25px;
  border: 1px solid #d9d9d9;
  vertical-align: middle;
  font-family: "Segoe UI";
  box-shadow: 0px 0px 1px #d9d9d9;
    position: relative;
}

.btn span {
    position: relative;
    z-index: 1;
}

.btn:after {
    content: "";
    width: 16px;
    height: 16px;
    background-image: -moz-linear-gradient( 135deg, rgb(235,235,235) 0%, rgb(254,254,254) 100%);
    background-image: -webkit-linear-gradient( 135deg, rgb(235,235,235) 0%, rgb(254,254,254) 100%);
    background-image: -ms-linear-gradient( 135deg, rgb(235,235,235) 0%, rgb(254,254,254) 100%);
    display: block;
    position: absolute;
    top: 3px;
    right: -9px;
    border: 1px solid #d9d9d9;
    border-left: none;
    border-bottom: none;
    border-radius: 2px;
    -webkit-transform: rotate(47deg) skew(5deg);
    -moz-transform: rotate(47deg) skew(5deg);
    transform: rotate(47deg) skew(5deg);
}

＆＃13;

<button class="btn"><span>Some button</span></button>

＆＃13;

＆＃13;

＆＃13;

Answer 2

.btn {
    position: relative;
    background: #c2e1f5;
    border: 10px solid #c2e1f5;
}
.btn:before {
    left: 100%;
    top: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

.btn:before {
    border-color: rgba(194, 225, 245, 0);
    border-left-color: #c2e1f5;
    border-width: 36px;
    margin-top: -36px;
}