8

Вот пример на картинке, как можно это реализовать? Желательно на чистом css?

пример

2
  • Думаю, без SVG тут не обойтись
    – Cheg
    8 июл 2017 в 18:29
  • Для создания эффекта резины вы можете использовать этот инструмент angrytools.com/gradient
    – nikant25
    9 июл 2017 в 3:19

2 ответа 2

12

UPD. Вот кнопка с градиентом, скошенным краем и закруглёнными углами. Растягивается под содержимое.

скриншот

Делал на основе стрелки с градиентом. Чтобы получить скошенную сторону, спрятал за кнопку псевдоэлемент и трансформировал его с помощью skewX. Чтобы кнопка растягивалась, переместил точку трансформации в угол, растянул псевдоэлемент между верхним и нижним краями родителя и задал ему ширину как у родителя.

https://codepen.io/glebkema/pen/eRPgMP

.btn-skew,
.btn-skew:before {
  border: 1px solid #4d7a9c; 
  box-sizing: border-box;
  -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
          border-radius: 5px;

  background: #238fe7; /* Old browsers */
  background: -moz-linear-gradient(top,  #238fe7 0%, #156fba 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top,  #238fe7 0%,#156fba 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom,  #238fe7 0%,#156fba 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#238fe7', endColorstr='#156fba',GradientType=0 ); /* IE6-9 */ 
}

.btn-skew {
  border-left: none;
  color: white;
  font-size: 18px;
  margin-left: 20px;
  padding: 10px 14px 11px 10px;
  position: relative;
}

.btn-skew:before {
  content: '';
  display: block;
  position: absolute; top: -1px; right: 0; bottom: -1px;
  width: 100%;
  z-index: -1;
 
  -webkit-transform: skewX(-15deg);
     -moz-transform: skewX(-15deg);
      -ms-transform: skewX(-15deg);
       -o-transform: skewX(-15deg);
          transform: skewX(-15deg);
  -webkit-transform-origin: 0 0;
     -moz-transform-origin: 0 0;
      -ms-transform-origin: 0 0;
       -o-transform-origin: 0 0;
          transform-origin: 0 0;
}
<button class="btn-skew">Кнопка</button>
<button class="btn-skew">Много разных слов</button>

4
  • Кто минусовал, напишите, за что. 8 июл 2017 в 20:02
  • злой чудик какой то поставил минус - я поправил
    – user33274
    9 июл 2017 в 4:59
  • @МаксимЛенский Спасибо :) 9 июл 2017 в 5:01
  • 1
    @GlebKemarsky а я еще плюсик добавил )) 9 июл 2017 в 8:21
3

Реализация на основе свойства transform

.element {
  display:inline-block;
  position:relative;
  width:100px; height:40px;
  background-color:blue;
  border-radius:5px 5px 5px 0;
  padding-left:15px;
}
.element::before {
  position:absolute;
  top:0; bottom:0; left:-7.5px;
  width:15px;
  background-color:blue;
  border-radius:5px 0 0 7.5px;
  content:'';
  transform:skewX(-15deg);
}
body {
  margin:100px;
}
<div class="element"></div>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.