如何用CSS实现按钮右侧的梳齿状边框？

方法1：用伪元素做分段边框 #

要是你需要的是明确断开间隙的边框，直接用两个伪元素分别画上下两段就行：

.button {
  position: relative;
  padding: 8px 16px;
  background: #fff;
  border: none;
  display: inline-flex;
  align-items: center;
  /* 这里可以加你自己的按钮样式，比如字体、圆角之类的 */
}

.button::before,
.button::after {
  content: '';
  position: absolute;
  right: 0;
  width: 1px;
  background: #ccc; /* 改成你要的边框颜色 */
}

.button::before {
  top: 20%; /* 调这个控制上边边框的起始位置 */
  height: 30%; /* 调这个控制上边边框的高度 */
}

.button::after {
  bottom: 20%; /* 调这个控制下边边框的起始位置 */
  height: 30%; /* 调这个控制下边边框的高度 */
}

方法2：用线性渐变做渐变边框 #

如果图里的边框是中间渐变透明的，用线性渐变模拟最方便：

.button {
  position: relative;
  padding: 8px 16px;
  background: #fff;
  border: none;
  display: inline-flex;
  align-items: center;
}

.button::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  width: 1px;
  background: linear-gradient(to bottom, #ccc 0%, transparent 50%, #ccc 100%);
  /* 颜色和渐变位置都可以自己调 */
}

方法3：用SVG背景（复杂样式用） #

要是边框样式特别复杂，直接把SVG转成base64嵌进去当背景，不用额外图片文件：

.button {
  position: relative;
  padding: 8px 16px;
  background: #fff;
  border: none;
  display: inline-flex;
  align-items: center;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="1" height="100"><path d="M0 0 L0 30 M0 70 L0 100" stroke="#ccc" stroke-width="1"/></svg>');
  background-repeat: no-repeat;
  background-position: right center;
  background-size: 1px 100%;
}

你可以根据图里的实际效果，调整颜色、位置、高度这些参数，肯定能匹配上。

内容的提问来源于stack exchange，提问作者Bronzato