按钮上的锯齿形边框，也有一个内部虚线边框 [英] Zig zag border on a button which also has an inner dotted border

问题描述

我正在尝试在按钮上做一个锯齿形的边框.我已经用谷歌搜索了一个解决方案，但是该解决方案中的之字形边框在底部，但是我需要在右侧.

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?

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

实时预览.

推荐答案

您只需更改渐变的角度，其大小，位置并重复下面的代码段中的设置即可.所做的更改是不言而喻的，因此，我将不做过多详细说明(如果需要更多说明，请给我评论).

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

我所做的另一项更改是删除outline并将虚线边框移至伪边框.之所以这样做，是因为蒙版仅作用于元素的边界，而不是outline，因此应用蒙版时，轮廓线也将被蒙版.

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.

(下面的代码段使用掩码，因此在非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.

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>

这篇关于按钮上的锯齿形边框，也有一个内部虚线边框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！