CODEWITHSUNDEEP
csscss-shapes
styler
styler

Reputation: 16521

Advice on how to create this button shape

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?

enter image description here

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?

Upvotes: 2

Views: 333

Answers (4)

Andrea Ligios
Andrea Ligios

Reputation: 50281

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

Upvotes: 2

Roko C. Buljan
Roko C. Buljan

Reputation: 206669

LIVE DEMO

enter image description here

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

Upvotes: 1

Albzi
Albzi

Reputation: 15619

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

Upvotes: 2

Severin
Severin

Reputation: 381

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/

Upvotes: 1

Related Questions