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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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