按钮上的锯齿形边框也有一个内部虚线边框

Question

我正在尝试在按钮上制作锯齿形边框。我用谷歌搜索了一个解决方案，但此解决方案中的之字形边框位于底部，但我需要它在右侧。

我试图重写解决方案，但不幸的是线性渐变对我来说太难了。我只能创造出奇怪的形状。

你能帮我重写解决方案吗？

我的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

我会去，这个时候，只是用伪绘制的渐变，所以它也可以用于其他一些浏览器。对于旧版浏览器，您会看到四周都是带点的边框。

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>

按钮上的锯齿形边框也有一个内部虚线边框

Zig zag border on a button which also has an inner dotted border

css

border

css-shapes

linear-gradients