更改按钮形状html / css

Question

我正在开发一个html项目，创建一个网站，我通过为每个菜单选项创建按钮来添加导航栏/菜单。

我的按钮是黑色的，我希望它的形状变得像红色的一个按钮。

这是我的代码css，用于设置按钮的形状：

忽略颜色。我的问题是如何改变这种形状而没有别的。有什么想法吗？

li {
    display: inline;
    border: 0px solid #000000;
    font-family: Futura, Tahoma, sans-serif;
    color: #ffffff;
    padding: 25px;
    border-radius: 1px 1px ;
    background-color: #cc0323
}

Answer 1

从问题的声音中，您希望在不影响文本的情况下更改形状。实现此目的的最佳方法是::before或::after伪元素。

li {
  border: 0px;
  display: inline-block;
  position: relative;
  z-index: 1;
  border: 0px solid #000000;
  background-color: transparent;
  font-family: Futura, Tahoma, sans-serif;
  color: #ffffff;
  padding: 25px;
  margin-left: 20px;
}
li::after {
  content: "'";
  color: transparent;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0px;
  top: 0px;
  z-index: -1;
  border-radius: 3px;
  background-color: #cc0323;
  transform: skew(-30deg);
-webkit-transform: skew(-30deg);
-o-transform: skew(-30deg);
-moz-transform: skew(-30deg);
-ms-transform: skew(-30deg);
}

这是它的样子： http://jsbin.com/aCIQupeJ/2

Answer 2

在 x轴上使用 transform：skew 。 Ex：

transform: skew(-30deg);
-webkit-transform: skew(-30deg);
-ms-transform: skew(-30deg);

应该给你你想要的东西。但是，您无法在内联元素上使用它，因此您必须更改它（可能是内联块）：

li {
    display: inline-block;
    border: 0px solid #000000;
    font-family: Futura, Tahoma, sans-serif;
    color: #ffffff;
    padding: 25px;
    border-radius: 1px 1px ;
    background-color: #cc0323
    transform: skew(-30deg);
    -webkit-transform: skew(-30deg);
    -ms-transform: skew(-30deg);
}

<强> DEMO