Advice on how to create this button shape

Question

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?

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?

Answer 1

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

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

Running example

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

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:

Running example with non rotated text

Code:

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

Answer 2

Taken from this site here.

You can create thate shape by using this:

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

Here is an example

If you want text, put text in the div and add to the css this:

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

However you'll need to do some fiddling to get it to the right width and height etc.

UPDATED EXAMPLE

Answer 3

You can achieve that style by using :before and :after. The trick is to skew the elements on the sides and apply a little border-radius for the smooth rounding, like this:

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

Fiddle here: http://jsfiddle.net/JyhwZ/1/

Answer 4

LIVE DEMO

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