如何使用CSS创建梯形按钮？

Question

我想使用CSS创建上面的图像,将其用作按钮(在其上方放置文本).

按钮大小:宽度为180px,高度为36px

谁能帮我？

Answer 1

加入一个三角形和一个div http://jsfiddle.net/togwsmme/21/

.btn {
  width: 100px;
  height: 100px;
  background: red;
  float: left;
}
.rit {
  float: left;
  width: 0;
  height: 0;
  border-top: 100px solid red;
  border-right: 100px solid transparent;
}

<div class="btn">Content</div>
<div class="rit"></div>