0

Нужно сделать кнопку с косыми границами, то есть как-то деформировать её. Пробовал clip-path, но бордер обрезается.

.btn {
    display: flex;
    align-items: center;
    justify-content: center;
    clip-path: polygon(14% 0, 100% 28%, 90% 100%, 0 100%);
    border: 3px solid #000;
    width: 253px;
    height: 71px;
}
 </div><a class="btn hero__btn-offer" href="/"><span class="btn__text">заказать</span></a>

1
  • Ну, у вас нормально деформировалось. А бордер и должен обрезаться. Если вы хотите, чтобы бордер повторял форму обрезки, придется обрезать ДВЕ фигуры и накладывать их так, чтобы симулировать бордер. 4 дек 2019 в 12:33

2 ответа 2

3

Как-то так:

.btn {
  display: flex;
  align-items: center;
  clip-path: polygon(14% 0, 100% 28%, 90% 100%, 0 100%);
  border: 0px none;
  width: 253px;
  height: 71px;
  background: #555;
}

.btn__text {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  clip-path: polygon(15% 4%, 98% 32%, 89% 96%, 2% 96%);
  background: pink;
}
<a class="btn hero__btn-offer" href="/"><span class="btn__text">заказать</span></a>

1
  • Нужно чтоб блок сам был прозрачным
    – cool-t
    4 дек 2019 в 13:03
3

А как же transform:skew?

.btn{
  display: block;
  border: solid;
  width: 100px;
  transform: skew(-10deg);
}

.btn .btn__text{
 display: block;
 text-align: center;
 transform: skew(10deg);
}
<a class="btn" href="/"><span class="btn__text">заказать</span></a>

или уже используйте svg

text {
  text-anchor: middle;
  dominant-baseline: central;
  pointer-events: none;
  transition: 0.2s;
  user-select: none;
}

polygon {
  stroke: black;
  fill: wheat;
  cursor: pointer;
  transition: 0.2s;
}

polygon:hover {
  stroke: steelblue;
}

polygon:active {
  stroke-width: 3px;
}

polygon:hover + text {
  fill: steelblue;
}
<svg width=100 height=50>
<polygon points="10,5,90,15,95,45,5,45"></polygon>
<text x=50 y=25>click me</text>
</svg>

0

Ваш ответ

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

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