Css 关于如何创建此按钮形状的建议

我想创造一个按钮，有两个轻微的翅膀两侧，但不完全确定如何实现这个形状，并想知道是否有人可以提供一些指导

我知道我需要使用前后psuedos，但不确定如何创建进入按钮主体的轻微曲线？

摘自

您可以使用以下方法创建该形状：

#trapezoid {
    border-bottom: 100px solid red;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    height: 0;
    width: 100px;
}

如果需要文本，请将文本放入div并添加到css中，如下所示：

text-align:center;
line-height:30px; /*Size of bottom border*/

然而，你需要做一些摆弄，使其达到正确的宽度和高度等

---

更新的示例

您可以通过使用

：before

和

：after

实现该样式。诀窍是使侧面的元素倾斜，并为平滑圆角应用一点边界半径，如下所示：

button {
  border: 0 none;
  background-color: red;
  position: relative;

  font-size: 4em;
  margin-left: 100px; 
}

button:before,
button:after {
  content: '';
  position: absolute;
  background-color: inherit;
  top: 0;
  bottom: 0;
  width: 1em;
  z-index: -1;
}

button:before {
  left: -0.5em;
  -webkit-transform: skew(-10deg);
  transform: skew(-10deg);
  border-top-left-radius: 10%;
}

button:after {
  left: auto;
  right: -0.5em;
  -webkit-transform: skew(10deg);
  transform: skew(10deg);
  border-top-right-radius: 10%;
}

在这里拉小提琴：

---

要给人一种三维平面远离POV旋转的印象，如（重新创建），请使用（前缀）和（或rotateX）

要防止锯齿，请使用1px透明轮廓

如果不希望文本旋转，请将上面的代码应用于

：：before

伪元素，该伪元素相对于其父元素绝对定位：

代码：

---

梯形很简单，但圆角有点问题。有时候，图像是最好的方式。@Paulie\u为什么？在我的示例中，我只使用了

边框左上半径

和

边框右上半径

，这很好。因为有角度的边不会在可以用边框半径属性描述的精确点处满足边框半径。他们相切。如果按钮足够小，没有人会注意到…但这是一个设计决定。嘿，是的，边界半径在这个例子中似乎不太好啊，我明白你的意思了，但只有当按钮足够大，可以实现。除了在IE中，它工作得很好。它很好，但我认为你有很多神奇的数字在那里…我很想看看它在更小的尺寸，不同的宽度等方面有多灵活。仍然…很好！它应该非常灵活，因为我使用了

ems

和

%

。在小提琴中，只需将按钮的字体大小从4em更改为任意大小，即可看到按钮正在适应。唯一基于px的值是按钮左侧的边距，我使用该边距在按钮左侧仅留出足够的空间，以便：在完全可见之前。您可能必须包含一些兼容性

.js

，才能在

  <ul>
    <li><a href="#" class="active">HOME</a></li>
    <li><a href="#">ABOUT</a></li>
    <li><a href="#">CONTACT</a></li>
  </ul>

ul{
  list-style:none;
  border-bottom:2px solid #000;
  overflow:auto;
}
ul li a{
  color:#fff;
  float:left;
  border-bottom: 30px solid #EC2327;
  border-left:   4px solid transparent;
  border-right:  4px solid transparent;
  border-top:    4px solid #EC2327;
  border-radius: 14px 14px 0 0;
  height: 0;
  padding:0 20px;
  line-height:30px;
  text-align:center;
  text-decoration:none;
}
a.active{
  border-bottom-color: #000;
  border-top-color:    #000;
}

#trapezoid {
    -webkit-transform : perspective(400px) rotate3d(1, 0, 0, 20deg);
       -moz-transform : perspective(400px) rotate3d(1, 0, 0, 20deg);
         -o-transform : perspective(400px) rotate3d(1, 0, 0, 20deg);
        -ms-transform : perspective(400px) rotate3d(1, 0, 0, 20deg);
            transform : perspective(400px) rotate3d(1, 0, 0, 20deg);

        border-radius : 5px 5px 0 0;
              outline : 1px solid transparent;
}

#trapezoid {    
         width : 200px;
        height : 50px;
        margin : 10px;
       padding : 10px;
      position : relative;
    text-align : center;
}

#trapezoid::before {
    -webkit-transform : perspective(400px) rotate3d(1, 0, 0, 20deg);
       -moz-transform : perspective(400px) rotate3d(1, 0, 0, 20deg);
         -o-transform : perspective(400px) rotate3d(1, 0, 0, 20deg);
        -ms-transform : perspective(400px) rotate3d(1, 0, 0, 20deg);
            transform : perspective(400px) rotate3d(1, 0, 0, 20deg);
              outline : 1px solid transparent;
        border-radius : 5px 5px 0 0;
             position : absolute;
                  top : 0;
               bottom : 0;
                 left : 0;
                right : 0;
              content : '';
              z-index : -1;
           background : red;
}