Как сделать эту кнопку CSS с угловой, Drop shadow, Inset shadow с гибкостью по ширине

Как сделать эту кнопку CSS с угловой, Drop shadow, Inset shadow с гибкостью по ширине?

Введите описание изображения здесь

Я пытался сделать это здесь http://jsfiddle.net/jitendravyas/6RsnN/ но не о том, как придать ему угол и как создать вокруг него границу выреза.

И кнопка должна быть гибкой по ширине.

Я делаю это только для iphone, поэтому полный CSS3 разрешен.

2 4
css css3 webkit mobile-webkit

2 ответа:

Конечным результатом является:

Чистая синяя кнопка css http://img832.imageshack.us/img832/8258/664d7b5656434db68cbee8b.png

Демонстрация гибкости :

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

Эта кнопка может быть чистой CSS только с большим количеством дополнительной разметки с этой разметкой: 

<a class="btn">
    <span class="triangle"></span>
    <span class="btn_inner">
        <span class="triangle"></span>
        Back
    </span>
</a>

В основной трюк для создания треугольников с помощью box-shadow включает в себя несколько шагов:

  • Шаг 1. Создать элемент ".треугольник" - это будет обертка для настоящего треугольника.
  • Шаг 2. Примените position: absolute;, зафиксируйте его width и height:
    красный фон-цвет включен для демо
    Шаг 4
  • Шаг 3. Создайте большой квадратный элемент ".triangle:: before' - это будет "реальный" треугольник после шага 6
  • Шаг 4 . Поверните его на 45 градусов. (transform: rotate(45deg)).

  • Шаг 5 . Добавьте коробку-тень.
    Результат после шага 3::
    Шаг 3

  • Шаг 6 . Добавить overflow: hidden; та-дам!
    Шаг 5

На .tag_inner используйте тот же трюк, но box-shadow должен быть не inset, а нормальный.

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

Обновление: Сделать разметка более семантическая-только один элемент для треугольного трюка.

6

Вот ваш угол, но так как он уже является границей, вы не можете поставить границу на него: 

body {padding:40px; background-color: #1693da;}
.input {
    display:block;
    text-decoration:none;
    padding:10px 60px;    
    background:#117ebb;
    font-size:60px;
    color:#fff;
    border-radius: 20px;
    box-shadow: 0px 10px 0px #003355;
    position:relative;
}

.input:after {
    position:absolute;
    top:0;
    left:-32px;
    content:" ";
    width: 0;
    height: 0px;
    border-top: 45px solid transparent;
    border-bottom: 45px solid transparent;
    border-right:45px solid #117ebb;
}
0