Zig zag border on a button which also has an inner

问题:

I'm trying to do a zig zag border on a button. I have googled one solution, but the zig zag border in this solution is at the bottom, but I needed it at the right side.

I was trying to rewrite the solution, but unfortunately the linear gradient is too hard for me. I was only able to create weird shapes.

Can you, please, help me to rewrite the solution to be on the right?

My 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.

回答1:

You would just have to change the gradient's angles, its size, position and repeat settings like in below snippet. The changes are self explanatory and so I am not detailing them much (leave me a comment if you need more explanation).

The other change that I've done is to remove the outline and move the dotted border to a pseudo. I have done this because masks work only till the border of the element and not the outline, so when the mask is applied, the outline will also get masked out.

(The below snippet uses masks and so will not work in non-Webkit browsers, the second one would).

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>

---

Using Background instead of Masks:

Masks have poor browser support and work only on WebKit powered browsers. To produce a cross-browser output, we could use background-image instead of 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>

回答2:

i would go, at this time, just with the gradient drawn from a pseudo, so it can be avalaible also for a few other browser. for old browsers , you'll see the dooted border all around.

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>