html - CSS右侧带有三 Angular 形的按钮

我有一个简单的按钮：

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

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

现在我想做这样的事情：

最佳答案

它当然不是完美的，但是还算不错。

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

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

关于html - CSS右侧带有三 Angular 形的按钮，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/29166260/