Прозрачная закругленная кнопка с градиентной рамкой

Question

Во-первых, я искал подобные вопросы в SO, и многие, но ни один из них не имеют точных требований ниже.

Я пытаюсь создать кнопку ниже, используя чистый CSS.

Имеются следующие требования.

1. Имеет границу 1px с горизонтальным градиентом.
2. Должно быть прозрачным.
3. Он должен иметь закругленные углы
4. У него будет вырез границы, который также является прозрачным.
5. Должны быть переменной ширины и высоты
6. Должно работать во всех современных браузерах (кроме IE)

Я создал Кодовую Песочницу, которая получает все это правильно, за исключением радиуса границы. Я использовал многоугольную обрезку пути для вырезания и использовал border-image для градиента, поэтому border-radius не работает.

body {
  font-family: sans-serif;
  background-color: #232837;
}

.button {
  cursor: pointer;
  display: inline-block;
  height: 40px;
  line-height: 40px;
  padding: 0 10px;
  color: white;
  
  background-color: transparent;

  border: solid 1px;
  border-radius: 6px;
  border-image: linear-gradient(to left, #743ad5 0%, #d53a9d 100%);
  border-image-slice: 1;

  clip-path: polygon(0 0, 12px 0, 12px 1px, 24px 1px, 24px 0, 100% 0, 100% 100%, 0 100%);

}

 <div style="padding:40px;">
			<a class="button">This is a button</a>
		</div>

https://codesandbox.io/s/kw9p9k5073

Мне удалось избежать использования svgs, поскольку я недостаточно хорошо их понимаю, чтобы правильно реализовать решение, но если мне придется пойти по этому пути, то я это сделаю.

Любой совет будет очень признателен.

Answer 1

Учитывая тот факт, что у вас будет горизонтальный градиент с границей 1px, мы можем смоделировать это, создав несколько фоновых слоев. Левая и правая границы могут рассматриваться как сплошной цвет (поскольку это горизонтальный градиент), и только верх / низ должны быть действительно градиентными.

Самое сложное - найти процентное значение для верхнего градиента, чтобы иметь прозрачный зазор, и сохранить его таким же, как и для нижнего. Для этого я использовал математику, чтобы найти правильные значения.

Я сделал границу 2px, чтобы лучше увидеть результат

body {
  font-family: sans-serif;
  background-color: #232837;
}

.button {
  cursor: pointer;
  display: inline-block;
  height: 40px;
  line-height: 40px;
  padding: 0 10px;
  color: white;
  border:2px solid transparent;
  border-radius:10px;
  border-right-color:#743ad5;
  border-left-color:#d53a9d;
  background:
    linear-gradient(to left,
      rgb(116, 58, 213) 0%, rgb(186, 58, 143) 70% ,
      transparent 70%,  transparent 85%, 
      rgb(201, 58, 128) 85%, rgb(213, 58, 157) 100%) top/100% 2px,
    linear-gradient(to left, #743ad5 0%, #d53a9d 100%) bottom/100% 2px;
  background-repeat:no-repeat;
}

<a class="button">This is a button</a>
<a class="button">This is a long button</a>
<a class="button" style="padding:10px">This is a very long button</a>

Answer 2

Приведенный ниже код использует псевдоэлементы, но не соответствует требованию (2). Возможно, вы можете попробовать с помощью mix-blend-mode удалить фон.

body {
    font-family:sans-serif;
    background-color:#232837
}

.button {
    cursor:pointer;
    display:inline-block;
    padding:13px 15px 12px;
    color:#fff;
    background:#232837;
    border-radius:6px;
    position:relative
}

.button::after {
    position:absolute;
    top:-1px;
    bottom:-1px;
    left:-1px;
    right:-1px;
    background:linear-gradient(to left,#743ad5 0%,#d53a9d 100%);
    content:'';
    z-index:-1;
    border-radius:6px;
    clip-path:polygon(0 0,12px 0,12px 4px,24px 4px,24px 0,100% 0,100% 100%,0 100%)
}

Возможно использование SVG для создания rect с обводкой, установленной на linearGradient. Однако вам необходимо определить размер viewBox и размер элементов. Это было бы крайне не отвечающим, и ширина и высота вашей кнопки не могут быть переменными, поэтому не соответствует требованию (5).