Волнистые границы блока (в виде билетика)

Question

Подскажите пожалуйста, как можно получить волнистые границы у блока с помощью css?

Answer 1

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

button {
  width: 300px;
  height: 100px;
  background-color: violet;
  border: 0;
  border-radius: 10px;
  position: relative;
}

button div {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 5px;
}

div span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #fff;
}

div.left-border {
  left: -5px;
}

div.right-border {
  right: -5px;
}

<button>
  <div class="left-border">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
  </div>
  <div class="right-border">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
  </div>
</button>

Answer 2

Нарисовать необходимые элементы в графическом редакторе и сохранить их в формате .png
Воспользоваться в CSS свойством background с его возможностью множественных фонов:

body {
  background-color: #ccc;
}
.superButton {
  border: 0;
  font-size: 18px;
  font-weight: bold;
  color: white;
  width: 200px;
  height: 60px;
  background: 
    url(https://i.imgur.com/NseF4r8.png) top left no-repeat,
    url(https://i.imgur.com/65Q6oSd.png)  center / 184px 60px no-repeat ,
    url(https://i.imgur.com/LNIQX7Y.png) top right no-repeat;
}

<input type="button" class="superButton" name="button" value="Изучайте СSS">

<button type="submit" class="superButton"">Submit</button>

Answer 3

С использованием mask

.ticket {
  display: block;
  width: 350px;
  height: 150px;
  background-color: #651fff;
  border-radius: 10px;
  -webkit-mask-image:
    linear-gradient(0deg, #fff, #fff),
    radial-gradient(circle at -15% 50%, transparent 42.5%, #fff calc(42.5% + 0.75px)),
    radial-gradient(circle at 115% 50%, transparent 42.5%, #fff calc(42.5% + 0.75px));
          mask-image:
    linear-gradient(0deg, #fff, #fff),
    radial-gradient(circle at -15% 50%, transparent 42.5%, #fff calc(42.5% + 0.75px)),
    radial-gradient(circle at 115% 50%, transparent 42.5%, #fff calc(42.5% + 0.75px));
  -webkit-mask-repeat: no-repeat, repeat-y, repeat-y;
          mask-repeat: no-repeat, repeat-y, repeat-y;
  -webkit-mask-position: center center, 0 center, 100% center;
          mask-position: center center, 0 center, 100% center;
  -webkit-mask-size: calc(100% - 20px) 100%, 10px 20px, 10px 20px;
          mask-size: calc(100% - 20px) 100%, 10px 20px, 10px 20px;
}

<div class="ticket"></div>

БЛОГ НА HUSL

Волнистые границы блока (в виде билетика)

Ответы (3 шт):