Косые кнопочной одну стороны whitout изменения HTML

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

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

Это должно выглядеть изображения :

Button example

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

источник

2016-12-01 wsd

http://stackoverflow.com/questions/26075318/skew-div-border-of-one-side-only-using-one-div- только это может помочь – m2j

http://stackoverflow.com/questions/19761202/css3-transform-skew-one-side – m2j

https://codepen.io/o/pen/wosfH – m2j

Вы можете достичь этого путем добавления к кнопке в ::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>

источник

2016-12-01 15:45:27 Rounin

Большое спасибо. Есть ли другое решение, потому что, если у меня есть больше кнопок на других фонах, я должен подстроить каждый треугольник цветом фона ... – wsd

Я не понимаю, что вы подразумеваете под «другим решением». Пожалуйста, объясните, пожалуйста. Спасибо. – Rounin

Без треугольника ... Есть ли решение с преобразованием: skew() ?? – wsd

К сожалению это не wide browser support for 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>

источник

2016-12-02 09:13:26

Вы можете использовать псевдоэлемент :after, и он имеет greater support, чем путь клипа 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

источник

2016-12-03 06:31:18 Tina

Косые кнопочной одну стороны whitout изменения HTML

ответ

Смежные вопросы