Перекос кнопки с одной стороны без изменения HTML

как я могу перекосить кнопку с одной стороны, но без изменения HTML я хочу использовать код как кнопку Bootstrap

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

Это должно выглядеть так:

Пример кнопки

Большое спасибо за помощь


html css skew
person wsd    schedule 01.12.2016    source источник
comment
stackoverflow.com/questions/26075318/ это может помочь   -  person m2j    schedule 01.12.2016
comment
stackoverflow.com/questions/19761202/   -  person m2j    schedule 01.12.2016
comment
codepen.io/o/pen/wosfH   -  person m2j    schedule 01.12.2016

Ответы (3)


arrow_upward
1
arrow_downward

Вы можете добиться этого, добавив к вашей кнопке псевдоэлемент ::after, состоящий только из абсолютно позиционированного треугольника CSS (слегка повернутого):

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>

person Rounin    schedule 01.12.2016
comment
Большое спасибо. Есть ли другое решение, потому что, если у меня есть больше кнопок на других фонах, мне нужно стилизовать каждый треугольник с цветом фона... - person wsd; 01.12.2016
comment
Я не понимаю, что вы имеете в виду под другим решением. Пожалуйста, не могли бы вы объяснить подробнее? Спасибо. - person Rounin; 01.12.2016
comment
Без треугольника... Есть ли решение с transform: skew() ?? - person wsd; 01.12.2016
comment
Да, есть еще один очень похожий подход с использованием другого псевдоэлемента ::after. См. сообщение выше для второго подхода с использованием transform: skewX() и background-color: inherit. - person Rounin; 01.12.2016

arrow_upward
0
arrow_downward

К сожалению, не такая широкая поддержка браузером clip-path , но просто и красиво:

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

person Veiko Jääger    schedule 02.12.2016

arrow_upward
0
arrow_downward

Вы можете использовать псевдоэлемент :after, и он имеет большую поддержку, чем путь клипа CSS.

Ваш HTML будет выглядеть так, если вы просто добавите класс btn-clipped к кнопкам, которым хотите придать обрезанный стиль:

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

Вы бы добавили стили для .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 */
}

Кроме того, вы можете добавить обрезанные стили к .btn или .btn-default, если вы точно знаете, что стиль должен применяться глобально.

Вы можете увидеть, как Codepen работает здесь: http://codepen.io/tinacious/pen/dOdOOw< /а>

person Tina    schedule 03.12.2016