Skew a button one side whitout changing the HTML

Question

how can I skew a button on one side but without changing the HTML I want to use the code like a Bootstrap button

<a class="btn btn-default" href="">BUTTON</a>

It should look like this picture:

Button example

Thanks a lot for the help

http://stackoverflow.com/questions/26075318/skew-div-border-of-one-side-only-using-one-div-only this might help — m2j, Dec 01 '16 at 15:28
http://stackoverflow.com/questions/19761202/css3-transform-skew-one-side — m2j, Dec 01 '16 at 15:29

Rounin · Answer 1 · 2016-12-01T19:00:15.863

1

You can achieve this by adding to your button an ::after pseudo-element consisting only of an absolutely positioned CSS Triangle (slightly rotated):

button {
display: block;
position: relative;
width: 200px;
height: 60px;
margin-bottom: 12px;
color: rgb(255,255,255);
font-size: 32px;
line-height: 48px;
text-align: left;
background-color: rgb(51,204,51);
border: none;
}

button:nth-of-type(2) {
width: 140px;
}

button:nth-of-type(1)::after {
content: '';
display: block;
position: absolute;
top: -60px;
right: -60px;
width: 0;
height: 0;
border: 60px solid transparent;
border-bottom-color: rgb(255,255,255);
transform: rotate(-20deg);
}

button:nth-of-type(2)::after {
content: '';
display: block;
position: absolute;
top: 0;
right: -30px;
width: 60px;
height: 60px;
background-color: inherit;
transform: skewX(-25deg);
}

<button type="button">Button</button>
<button type="button">Button</button>

edited Dec 01 '16 at 19:00

answered Dec 01 '16 at 15:45

Rounin

27,134
9
83
108

Thanks a lot. Is there also an other solution because if I have got more buttons on other backgrounds I have to style each triangle with the background color... – wsd Dec 01 '16 at 17:30
I don't understand what you mean by "another solution". Please can you explain further? Thank you. – Rounin Dec 01 '16 at 18:01
Without a triangle... Is there a solution with transform: skew() ?? – wsd Dec 01 '16 at 18:22
Yes, there's another pretty similar approach using another `::after` pseudo-element. See the post above for a second approach using `transform: skewX()` and `background-color: inherit`. – Rounin Dec 01 '16 at 19:03

score 1 · Answer 2 · answered Dec 02 '16 at 09:13

Unfortunately not that wide browser support for clip-path , but easy and pretty:

.btn {
  color: white;
  display: inline-block;
  padding: 10px 20px 10px 10px;
  text-decoration: none;
  -webkit-clip-path: polygon(0 0, 100% 0%, calc(100% - 10px) 100%, 0% 100%);
  clip-path: polygon(0 0, 100% 0%, calc(100% - 10px) 100%, 0% 100%);
}

.btn-default {
  background-color: green;
}
.btn-blue {
  background-color: blue;
}
.btn-red {
  background-color: red;
}

<a class="btn btn-default" href="">BUTTON</a>
<br><br>
<a class="btn btn-blue" href="">BUTTON</a>
<br><br>
<a class="btn btn-red" href="">BUTTON</a>

score 0 · Answer 3 · answered Dec 03 '16 at 06:31

You can use the pseudo element :after and it has greater support than CSS clip path.

Your HTML would look like this, where you simply add a class btn-clipped to buttons you wish to have the clipped style:

<button class="btn btn-default btn-clipped">
  Clipped button
</button>

You would add styles for .btn-clipped:

.btn-clipped {
  border-radius: 0;
  position: relative;
  overflow: hidden;
  text-align: left;
  padding-right: 25px; /* adjust this to your liking */
  width: 200px; /* you can also set a width if you like (optional) */
}

.btn-clipped:after {
  background-color: white;
  width: 30px;
  height: 120%;
  content: "";
  display: block;
  position: absolute;
  top: 0;
  right: -20px;
  transform: rotate(10deg); /* adjust this to tweak the angle */
}

Alternatively, you can add the clipped styles to .btn or .btn-default if you know for sure the style should be applied globally.

You can see a Codepen of it working here: http://codepen.io/tinacious/pen/dOdOOw

Skew a button one side whitout changing the HTML

3 Answers3