CSS кнопку Пользовательская форма Twitter Bootstrap

провел 2 часа уже, пытаясь заставить его работать, но до сих пор я только получаю это:CSS кнопку Пользовательская форма Twitter Bootstrap

.btn-custom{ width:100%; border-bottom: 100px solid blue; border-left:80px solid transparent; } 

.btn2 { 
display: inline-block; 
padding: 4px 12px; 
margin-bottom: 0px; 
font-size: 14px; 
line-height: 20px; 
text-align: center; 
vertical-align: middle; 
cursor: pointer; 
text-shadow: 0px 1px 1px rgba(255, 255, 255, 0.75); 

}

и это будет сама кнопка:

<a href="#" style="height:145px;line-height:80px;font-size:18px;" class="btn2 btn-block btn-custom">test</a>

То, что я пытаюсь сделать это:

Я думаю, что я бы тоже пе ed the transform: rotate function, чтобы повернуть кнопку, но есть ли способ повернуть ее, не вращая текст?

На данный момент с кодом, который я разместил выше, кнопка не выглядит так, как она должна выглядеть, она немного короче (высота), текст не там, где он должен быть, и если я поверну его, текст тоже вращается. То есть то, что он выглядит сейчас:

Может кто-нибудь помочь мне с этим?

источник

2013-08-31 Jaap Hoogberg

Не могли бы вы создать относительную позиционированную форму CSS с абсолютным позиционированным текстом div сверху? '

' – itsclarke

Как бы вы разместили текст выше формы в ответной теме бутстрапа? –

Есть ли причина, по которой вы не хотите использовать css-формы? Проверьте демо, которую я собрал (result и snippet), это может вам помочь.

источник

2013-08-31 19:15:20

Эй, спасибо за ваш ответ, да, я хочу использовать css-формы. Ваш код почти точно, что я пытаюсь сделать, кроме того, если я использую transform: rotate (180deg); он также превращает текст. Я хотел бы иметь одну «кнопку» с отрезанной правой нижней стороной, а другую с правой верхней стороной, как в изображении, который я опубликовал. –

Оформить заказ на этот вопрос: http://stackoverflow.com/questions/7514200/css3-transform-an-element-but-not-its-descendants Это небольшой взлом, но, похоже, он работает. И если вы хотите нарезать верхнюю часть, просто измените свойство border-bottom на верх. –

Вы видите какую-либо возможность использовать этот css-взломать сплошной прозрачный вместо белого (или любой другой цвет для фактического угла)? –

Вы можете сделать это, используя это изображение в качестве фона для данного раздела.

источник

2013-08-31 18:25:45

Я не хочу использовать изображения, это должен быть отзывчивый веб-сайт, вот как я узнал о css-формах, но потом я подумал, что было бы здорово немного изменить кнопки бутстрапа, поскольку он основан на twitter bootstrap , сайт разбит на 3 span4 в пределах span12 –

CSS кнопку Пользовательская форма Twitter Bootstrap

ответ

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