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

【问题标题】：Zig zag border on a button which also has an inner dotted border按钮上的锯齿形边框也有一个内部虚线边框
【发布时间】：2016-10-04 02:08:04
【问题描述】：

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

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

请您帮我改写正确的解决方案吗？

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

【问题讨论】：

标签： css border css-shapes linear-gradients

【解决方案1】：

您只需更改渐变的角度、大小、位置和重复设置，如下面的 sn-p 所示。这些更改是不言自明的，因此我不会详细说明它们（如果您需要更多解释，请给我留言）。

我所做的另一项更改是删除outline 并将虚线边框移动为伪。我这样做是因为遮罩只在元素的边框而不是outline 处起作用，所以当应用遮罩时，轮廓也会被遮住。

（下面的 sn-p 使用掩码，因此在非 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>

使用背景代替蒙版：

Mask 对浏览器的支持很差，只能在 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>

【讨论】：

【解决方案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;
}

&lt;button&gt;button dotted zigzaged &lt;/button&gt; &lt;button&gt;another zigzaged &lt;br/&gt;button dotted&lt;/button&gt;

【讨论】：