How do I create a trapezoidal button using CSS?

Question

Width is 180px, height is 36px, need to use it as a button

I want to create the above image using CSS, to use it as a button (placing text above it).

Button size: width is 180px, height is 36px

Can anyone help me?

[See here!!!](http://stackoverflow.com/a/27707323/3436942) - you literally only need one div for this! — jbutler483, Jan 06 '15 at 10:56

Akshay · Accepted Answer · 2016-12-21T07:47:06.743

6

Join a triangle and a div http://jsfiddle.net/togwsmme/21/

.btn {
  width: 100px;
  height: 100px;
  background: red;
  float: left;
}
.rit {
  float: left;
  width: 0;
  height: 0;
  border-top: 100px solid red;
  border-right: 100px solid transparent;
}

<div class="btn">Content</div>
<div class="rit"></div>

edited Dec 21 '16 at 07:47

answered Dec 31 '14 at 11:23

Akshay

14,138
5
46
70

@Sharath-designer you are welcome..accept the answer by clicking the 'tick' mark if you think this answer suits you – Akshay Dec 31 '14 at 11:33
I would avoid this as it makes the triangle 'part' unclickable. – jbutler483 Jan 06 '15 at 10:58
Just a suggestion @Akshay. It would be more suitable to use classes instead of ids as the latter are supposed to be unique. – James P. Dec 20 '16 at 17:56
@JamesP. Thanks , you are right , i have edited the answer – Akshay Dec 21 '16 at 07:48

score 4 · Answer 2 · answered Dec 31 '14 at 11:38

you can try this code

.ribbon {
 font-size: 16px !important;
 width: 150px;
 cursor:pointer;    
 position: relative;
 background: #000;
 color: #fff;
 text-align: center;
 padding: 0.5em 0px; /* Adjust to suit */
 margin: 2em auto 3em; /* Based on 24px vertical rhythm. 48px bottom margin - normally 24 but the ribbon 'graphics' take up 24px themselves so we double it. */
}
.ribbon:after {
 left: 100%;
 border: solid transparent;
 content: " ";
 height: 0;
 width: 0;
 position: absolute;
 pointer-events: none;
}

.ribbon:after {
border-color: rgba(136, 183, 213, 0);
border-left-color: #000;
border-width: 0px 0px 36px 44px;
top: 1%;
}

<h1 class="ribbon">
   <strong class="ribbon-content">Button</strong>
</h1>

The Pragmatick · Answer 3 · 2014-12-31T11:33:00.730

3

Using CSS Shapes

#triangle {
  width: 0;
  height: 0;
  border-top: 60px solid #213971;
  border-right: 60px solid transparent;
  float: left;
}
#rect {
  width: 300px;
  height: 60px;
  background: #213971;
  float: left;
}
#text {
  position: absolute;
  line-height: 60px;
  padding-left: 20px;
  font-size: 20px;
  color: white;
  font-family: sans-serif;
}

<div id="rect">
</div>
<div id="triangle">
</div>
<div id="text">Awesome</div>

edited Dec 31 '14 at 11:33

answered Dec 31 '14 at 11:27

The Pragmatick

5,379
27
44

Thank you! works just fine! – Sharath-designer Dec 31 '14 at 11:35

How do I create a trapezoidal button using CSS?

3 Answers3

Using CSS Shapes

Linked