我试图在按钮上做一个锯齿形边框。我用google搜索了一个解决方案，但此解决方案中的锯齿形边框位于底部，但我需要在右侧。
我试图重写解决方案，但不幸的是线性渐变对我来说太难了。我只能创造奇怪的形状。
请你帮我重写一下右边的解决方案吗？
我的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;
答案 0 :(得分：4)
您只需更改渐变的角度，大小，位置和重复设置，如下面的代码段所示。这些变化是不言自明的，所以我没有详细说明（如果您需要更多解释请留下评论）。
我所做的另一项更改是删除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>
使用背景代替面具：
Masks的浏览器支持较差，仅适用于支持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>
答案 1 :(得分：4)
我会在这个时候，只使用从伪绘制的渐变，所以它也可以用于其他一些浏览器。对于旧浏览器，您将看到周围的dooted边框。
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>