Кнопка динамической высоты с градиентом и заостренным концом - PullRequest
Новая
       0

Кнопка динамической высоты с градиентом и заостренным концом

0 голосов
/ 22 января 2019

Я хотел бы создать кнопки с градиентом в качестве фона и заостренным концом, который будет регулироваться по высоте кнопки, которая зависит от объема текста внутри. Фон страницы может меняться, поэтому я не могу использовать сплошной цвет для заостренного конца. Лучшее решение, которое я придумал, - это использовать псевдоэлемент с svg-кодом в качестве фонового изображения, устанавливая высоту фона на 100%, но это решение меня не устраивает слишком сильно, потому что я не знаю, будет ли оно выглядеть хорош во всех современных браузерах. Есть ли у вас какие-либо идеи? Может мне стоит использовать Javascript? 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Button example</title>
  <style>
    html, body {
      height: 100%;
    }

    body {
      background-color: #e5e5e5;
    }

    .wrapper {
      background-color: #ffffff;
      padding: 15px;
      max-width: 180px;
      margin: 0 auto;
    }

    .btn {
      position: relative;
      display: inline-block;
      background: #000000 linear-gradient(to bottom, #000000, #666666);
      color: #ffffff;
      font-family: Arial, Helvetica, sans-serif;
      font-weight: bold;
      padding: 8px 20px;
      margin-right: 12px;
      margin-bottom: 15px;
      border-top-left-radius: 4px;
      border-bottom-left-radius: 4px;
    }

    .btn::after {
      content: '';
      position: absolute;
      top: 0px;
      right: -12px;
      display: inline-block;
      height: 100%;
      width: 13px;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='40'%3E%3ClinearGradient id='css-btn-example' gradientUnits='userSpaceOnUse' x1='6.5' y1='40' x2='6.5'%3E%3Cstop offset='0' stop-color='%23666'/%3E%3Cstop offset='1'/%3E%3C/linearGradient%3E%3Cpath fill='url(%23css-btn-example)' d='M0 0h1l12 20L1 40H0z'/%3E%3C/svg%3E");
      background-size: 13px 100%;
    }

    .btn:last-child {
      margin-bottom: 0;
    }
  </style>
</head>
<body>
  <div class="wrapper">
    <div class="btn">One line</div>
    <div class="btn">Two line button example</div>
    <div class="btn">Three line button long example</div>
  </div>
</body>
</html>

Desired effect

1 Ответ

0 голосов
/ 22 января 2019

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

.box {
  width: 150px;
  padding: 20px;
  box-sizing: border-box;
  position: relative;
  color: #fff;
  z-index: 0;
  overflow: hidden;
  margin:5px;
  border-radius:5px 0 0 5px;
}

.box:before,
.box:after {
  content: "";
  position: absolute;
  z-index:-1;
  height: 50%;
  left: 0;
  right: 0;
}

.box:before {
  top: 0;
  background: linear-gradient(to bottom, blue, #4100bf);
  transform: skewX(30deg);
  transform-origin: bottom right;
}

.box:after {
  bottom: 0;
  background: linear-gradient(to top, purple, #4100bf);
  transform: skewX(-30deg);
  transform-origin: top right;
}
<div class="box">
  Some text here
</div>
<div class="box">
  Some text here Some text here
</div>

Другая идея без прозрачности состоит в том, чтобы рассмотреть многократный фон и скрыть градиент белым цветом (или любым цветом фона).Затем вы можете рассмотреть любой вид градиента, даже радиальный градиент. 

.box {
  width: 150px;
  padding: 20px;
  box-sizing: border-box;
  color: #fff;
  margin:5px;
  background:
    linear-gradient(to bottom right,transparent 48%,#fff 50%) bottom right/20px 50%,
    linear-gradient(to top right,transparent 48%,#fff 50%) top right/20px 50%,
    linear-gradient(to bottom, blue,purple);
  background-repeat:no-repeat;
  border-radius:5px 0 0 5px;
}
<div class="box">
  Some text here
</div>
<div class="box">
  Some text here Some text here
</div>

У вас также есть решение для пути обрезки: 

.box {
  width: 150px;
  padding: 20px;
  box-sizing: border-box;
  color: #fff;
  margin: 5px;
  background: linear-gradient(to bottom, blue, purple);
  background-repeat: no-repeat;
  border-radius: 5px 0 0 5px;
  -webkit-clip-path: polygon(0% 0%, calc(100% - 20px) 0%, 100% 50%, calc(100% - 20px) 100%, 0% 100%);
  clip-path: polygon(0% 0%, calc(100% - 20px) 0%, 100% 50%, calc(100% - 20px) 100%, 0% 100%);
}
<div class="box">
  Some text here
</div>
<div class="box">
  Some text here Some text here
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...