使用 CSS 的多个边框

Question

我想只用CSS来实现这个设计，我找不到方法，你们有什么想法吗？

• 除了使用线条作为一个图像并像:before = "content" 那样实现它，这不是纯CSS

Answer 1

为此我想出的唯一想法是使用剪辑路径将形状强制放入元素中。因为这当然会破坏应用边框的任何机会，所以我的尝试是使用真正按钮的父容器伪造边框。我用这个生成了形状：

Generator

对于效果而言，这无疑需要做很多工作，您还必须设置 active 和悬停伪类的样式以使其看起来不错，但我认为这是一种方法。

button {
  color: black;
  width: 300px;
  height: 90px;
  /*Shape*/
  clip-path: polygon(15% 8%, 100% 8%, 100% 100%, 15% 100%, 15% 9%, 6% 1%, 6% 0);
  /*White or whatever your background color is when the button should look transparent*/
  background-color: white;
  /*Disable default border*/
  border: none;
  /*Center the Text a bit as we cut out width on the left of the real button*/
  padding-left: 15%;
  z-index: 2;
}
.fakedborder {
    /*Center button in the div so the fake border looks evenly*/
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    /*Make sure the button is in front*/
    z-index: 1;
    /*slightly bigger than the real button*/
    width: 302px;
    height: 92px;
    /*Same Shape!*/
    clip-path: polygon(15% 8%, 100% 8%, 100% 100%, 15% 100%, 15% 9%, 6% 1%, 6% 0);
    /*Color of the border you want*/
    background-color: grey;
}

<div class="fakedborder"><button>TextisHere</button></div>

Answer 2

这是一种使用渐变的方法：

button {
  border: 1px solid grey;
  background: white;
  font-size: 16px;
  padding: 5px 20px;
  min-width: 100px;
  margin: 40px;
  position: relative;
}
button:before {
  content: '';
  position: absolute;
  width: 15px;
  height: 90%;
  top: 0;
  left: -15px;
  background-image: linear-gradient(180deg, transparent 35.71%, grey 35.71%, grey 50%, transparent 50%, transparent 85.71%, grey 85.71%, grey 100%);
  background-size: 14.00px 14.00px;
  transform: skewY(15deg);
  background-position: bottom;
}

<button>Solid</button>

Answer 3

这是一种使用线条的方法：

.box {
  display: inline-block;
  position: relative;
  padding: 1rem 5rem;
  border: 2px solid gray;
  margin: 2rem 5rem;
  color: gray;
  font-family: Sans-serif;
  font-weight: bold;
  cursor: pointer;
}
.box > span {
  content: '';
  position: absolute;
  height: 25%;
  left: 0;
  top: 0;
  width: 100%;
}
.box > span:nth-child(2) {
  top: 50%;
}
.box > span:nth-child(3) {
  top: 100%;
}
.box > span:nth-child(3):after {
  display: none;
}
.box > span:before, .box > span:after {
  content: '';
  position: absolute;
  width: 2rem;
  height: 2px;
  background: gray;
  border-radius: 2px;
  right: 100%;
  top: -1px;
  transform: rotate(45deg);
  transform-origin: 100% 0%;
  transition: transform 200ms ease-in-out;
}
.box > span:after {
  top: 100%;
}
.box:hover > span:before, .box:hover > span:after {
  transform: rotate(0deg);
}

<div class="box">
  Solid
  <span></span>
  <span></span>
  <span></span>
</div>