有关如何创建此按钮形状的建议 [英] Advice on how to create this button shape

问题描述

我想创建一个按钮，该按钮的两侧各有2个小翼，但不能完全确定如何实现这种形状，并且想知道是否有人可以提供一些指导？

I would like to create a button that has 2 slight wings either side but not completely sure how to achieve this shape and was wondering if anyone could offer some guidance?

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

I understand that I will need to use the before and after psuedos but unsure how to create that slight curve going into the main body of the button?

推荐答案

给人以3D平面远离POV旋转的印象，例如 星球大战 （也在svg中重新创建 ），使用（前缀）透视和 rotate3d （或rotateX）。

To give the impression of a 3d plane rotating away from POV, like Star Wars opening crawls (recreated in svg too), use (prefixed) perspective and rotate3d (or rotateX).

别名，请使用1像素的透明轮廓，如此处所述。

To prevent aliasing, use an 1px transparent outline, as described here.

运行示例

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

如果您不希望文本旋转，请应用上面的代码到 :: before 伪元素，绝对相对于其父元素放置：

If you instead do not want the text to be rotated, apply the code above to the ::before pseudo element, absolutely positioned relatively to its parent:

带有非旋转文本的运行示例

代码：

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

这篇关于有关如何创建此按钮形状的建议的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！