Zig zag border на кнопке, которая также имеет внутреннюю пунктирную границу

Question

Я пытаюсь сделать зигзаг границы на кнопке. У меня есть googled одно решение, но граница zig zag в этом решении находится внизу, но мне нужно было с правой стороны.

Я пытался переписать решение, но, к сожалению, линейный градиент слишком сильно для меня. Я мог создавать только странные формы.

Можете ли вы помочь мне переписать решение на право?

Мой CSS:

-webkit-mask-image: linear-gradient(0deg, transparent 30px, white 30px), linear-gradient(-135deg, white 15px, transparent 15px), linear-gradient(135deg, white 15px, transparent 15px); 
-webkit-mask-position: left bottom; 
-webkit-mask-repeat: repeat-x; 
-webkit-mask-size: 100% 100%, 30px 30px, 30px 30px; 

LIVE PREVIEW.

Answer 1

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

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

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

button { 
 
    position: relative; 
 
    height: 45px; 
 
    margin-top: 15px; 
 
    background-color: #99c94d; 
 
    border: none; 
 
    color: #475b28; 
 
    font-size: 14px; 
 
    font-weight: 700; 
 
    
 
    /* add the following */ 
 
    padding: 8px; 
 
    -webkit-mask-image: linear-gradient(white, white), linear-gradient(-225deg, white 5px, transparent 5px), linear-gradient(45deg, white 5px, transparent 5px); 
 
    -webkit-mask-position: left top, right top, right top; 
 
    -webkit-mask-repeat: repeat-y; 
 
    -webkit-mask-size: calc(100% - 10px) 100%, 10px 15px, 10px 15px; 
 
} 
 
button:after { 
 
    position: absolute; 
 
    content: ''; 
 
    height: calc(100% - 8px); /* 100% - top padding */ 
 
    width: calc(100% - 12px); /* 100% - right padding - buffer */ 
 
    top: 4px; /* half of top padding */ 
 
    left: 4px; /* half of left padding */ 
 
    border-style: dotted; 
 
    border-width: 2px; 
 
    border-color: #5b7731 transparent #5b7731 #5b7731; 
 
    box-sizing: border-box; 
 
} 
 
.tall { 
 
    height: 90px; 
 
}

<button type="submit">Lorem ipsum dolor sit amet.</button> 
 
<button type="submit" class="wide">Lorem ipsum dolor sit amet. Some more text</button> 
 
<button type="submit" class="tall">Lorem ipsum dolor sit amet.</button>

---

Использование фона вместо масок:

Маска имеет плохую поддержку браузера и работать только на WebKit браузеров работают. Чтобы создать кросс-браузерный вывод, мы могли бы использовать background-image вместо mask-image.

button { 
 
    position: relative; 
 
    height: 45px; 
 
    margin-top: 15px; 
 
    border: none; 
 
    color: #475b28; 
 
    font-size: 14px; 
 
    font-weight: 700; 
 
    
 
    /* add the following */ 
 
    padding: 8px; /* to give space before the dotted border */ 
 
    background-image: linear-gradient(#99c94d, #99c94d), linear-gradient(-225deg, #99c94d 5px, transparent 5px), linear-gradient(45deg, #99c94d 5px, transparent 5px); 
 
    background-color: transparent; 
 
    background-position: left top, right top, right top; 
 
    background-repeat: repeat-y; 
 
    background-size: calc(100% - 10px) 100%, 10px 15px, 10px 15px; 
 
} 
 
button:after { 
 
    position: absolute; 
 
    content: ''; 
 
    height: calc(100% - 8px); /* 100% - top padding */ 
 
    width: calc(100% - 12px); /* 100% - right padding - buffer */ 
 
    top: 4px; /* half of top padding */ 
 
    left: 4px; /* half of left padding */ 
 
    border-style: dotted; 
 
    border-width: 2px; 
 
    border-color: #5b7731 transparent #5b7731 #5b7731; 
 
    box-sizing: border-box; 
 
} 
 
.tall { 
 
    height: 90px; 
 
}

<button type="submit">Lorem ipsum dolor sit amet.</button> 
 
<button type="submit" class="wide">Lorem ipsum dolor sit amet. Some more text</button> 
 
<button type="submit" class="tall">Lorem ipsum dolor sit amet.</button>

Answer 2

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

button { 
 
    color:white; 
 
    margin:15px; 
 
    padding:0px 15px; 
 
    border:dotted 2px; 
 
    background: #99c94d; 
 
    box-shadow: 
 
    -3px -3px #99c94d, 
 
    -3px 3px #99c94d; 
 
    position:relative;/* to place the pseudo */ 
 
} 
 
button:before {/* draw the triangles shapes and hide the right border */ 
 
    content:''; 
 
    position:absolute; 
 
    /* coordonates : mind the border size and offset shadow */ 
 
    right:-9px; 
 
    top:-5px; 
 
    bottom:-5px; 
 
    width:10px;/* whatever you need */ 
 
    background:linear-gradient(45deg,#99c94d 29%,transparent 30%) 0 0 repeat, linear-gradient(-225deg,#99c94d 29%,transparent 30%)0 0 repeat;/* draw the trinagles to produce the repeating shape, you could also use repeating linear-gradients to skip background-size */ 
 
    background-size:20px 15px; /* size shape */ 
 
} 
 
body { 
 
    background:#333; 
 
}

<button>button dotted zigzaged </button> <button>another zigzaged <br/>button dotted</button>