剪辑路径解决方案

Question

我试图仅使用CSS设计按钮，而没有图像。问题在于左下角和右上角，当按钮处于纯色背景时，我使用背景颜色来实现此目的。问题是当背景不是纯色时你可以看到角落，就像下面的演示一样。

所以，我想用一种通用的方法来编写这个按钮，只用CSS而不是图像。

谢谢！

以下是我演示中的HTML：

<div id="banner">
  <div id="button-box">
    <a class="btn-cornered btn-cornered-dark-bg" href="#"><span>Learn More</span></a>
  </div>
</div>

CSS：

#banner {
  background: url('https://d3vv6lp55qjaqc.cloudfront.net/items/2D1R0A0B1q031R1C2P26/Image%202017-11-07%20at%201.57.17%20PM.png?X-CloudApp-Visitor-Id=8b9380dd59b56afec49e5f1e289c6692&v=53edcac2') no-repeat center -420px;
  background-size: cover;
  display: block;
  width: 100%;
  height: 200px;
  text-align: center;
}

#button-box {
  padding: 50px 0;
}

/* Button */
.btn-cornered {
  padding-left: 20px;
  padding-right: 20px;
  position: relative;
  display: inline-block;
  line-height: 53px;
  text-align: center;
  color: #fff;
  font-size: 24px;
  border: 1px solid #fff;
  border-bottom-left-radius: 10px;
  border-top-right-radius: 10px;
  text-decoration: none;
}
.btn-cornered:before {
    position: absolute;
    left: -1px;
    bottom: -1px;
    content: "";
    border-bottom: 11px solid #fff;
    border-right: 11px solid transparent;
}
.btn-cornered:after {
    position: absolute;
    left: -2px;
    bottom: -2px;
    content: "";
    border-bottom: 11px solid;
    border-right: 11px solid transparent;
}

.btn-cornered span {
    top: -2px;
    left: -1px;
    position: relative;
    padding-right: 20px;
    display: block;
    -webkit-transition: all 0.3s ease-in;
    transition: all 0.3s ease-in;
}
.btn-cornered span:before {
    position: absolute;
    content: "";
    border-bottom: 11px solid transparent;
    border-right: 11px solid #fff;
}
.btn-cornered span:after {
    position: absolute;
    content: "";
    border-bottom: 11px solid transparent;
    border-right: 11px solid;
}


/* Dark Background Styles */
.btn-cornered-dark-bg {
    height: 53px;
}
.btn-cornered-dark-bg:after {
    border-bottom-color: #000000;
}
.btn-cornered-dark-bg span {
    max-width: none;
    line-height: 58px;
    font-size: 24px;
    height: 53px;
    width: calc(100% + 2px);
}
.btn-cornered-dark-bg span:before {
    right: 1px;
    top: 1px;
}
.btn-cornered-dark-bg span:after {
    border-right-color: #000;
    right: 0px;
    top: 0px;
}

Answer 1

这是一个使用伪元素和一个倾斜的额外跨度来制作倾斜角的示例。诀窍是隐藏按钮上的溢出，并且稍微有点技巧，正确排列span的倾斜边框。

我并不完全满意，因为它需要额外的跨度，而且在更改字体大小时似乎有点脆弱，但这里是：

＆＃13;

*, *:before, *:after {
  box-sizing: border-box;
}

body {
  background: steelblue;
}

button {
  background: transparent;
  padding: 10px 20px;
  position: relative;
  border: none;
  margin: 20px;
  overflow: hidden;
  color: white;
}

button::before {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 15px;
  right: 15px;

  content: '';
  border-left: 1px solid white;
  border-top: 1px solid white;
}

button::after {
  display: block;
  position: absolute;
  bottom: 0;
  right: 0;
  top: 15px;
  left: 15px;
  
  content: '';
  border-right: 1px solid white;
  border-bottom: 1px solid white;
}

button span {
  display: block;
  position: absolute;
  z-index: -1;
  top: 0;
  right: -18px;
  bottom: 0;
  left: 15px;
  border: 1px solid white;
  transform: skew(45deg);
  transform-origin: bottom left;
}

＆＃13;

<button>
  <span></span>
  Sign up &amp; Stay Connected
</button>

＆＃13;

Answer 2

剪辑路径解决方案

由伪元素完成，之后使用css3 clip-path将其剪切为所需形状。但是，IE和Edge（Can I use）不支持剪辑路径。更改剪辑路径中的值以获得所需的边框宽度和“切割三角形”的长度可能有点棘手，因此我为此创建了一个小脚本 - Codepen

a {
  position: relative;
  padding: 8px 20px;
}

a::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  -webkit-clip-path: polygon(calc(100% - 2px) 11px, calc(100% - 2px) 100%, 100% 100%, 100% 10px, calc(100% - 10px) 0, 0% 0%, 0% calc(100% - 10px), 10px 100%, 100% 100%, 100% calc(100% - 2px), 11px calc(100% - 2px), 2px calc(100% - 11px), 2px 2px, calc(100% - 11px) 2px);
  clip-path: polygon(calc(100% - 2px) 11px, calc(100% - 2px) 100%, 100% 100%, 100% 10px, calc(100% - 10px) 0, 0% 0%, 0% calc(100% - 10px), 10px 100%, 100% 100%, 100% calc(100% - 2px), 11px calc(100% - 2px), 2px calc(100% - 11px), 2px 2px, calc(100% - 11px) 2px);
}

<a href="#">Text Here</a>

演示 - JS Bin

Answer 3

感谢大家的解决方案和建议。对于它的价值，this is the solution I came up。

CSS：

.abutton {
    overflow: hidden;
    position: relative;
    z-index: 1;
    padding: 10px 20px;
    border: none;
    background: transparent;
    text-align: center;
    line-height: 1;
    font-size: 24px;
    color: #fff;
    display: inline-block;
    text-decoration: none;
  }
  .abutton:before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    right: 8px;
    bottom: 8px;
    left: 0;
    border-left: 1px solid #ffffff;
  }
  .abutton:after {
    content: '';
    display: block;
    position: absolute;
    top: 8px;
    right: 0;
    bottom: 0;
    left: 15px;
    border-right: 1px solid #ffffff;
  }
  .abutton span {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
  }
  .abutton span:before,.abutton span:after {
    content: '';
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    -webkit-transform: skew(45deg);
    transform: skew(45deg);
  }
  .abutton span:before {
    left: 8px;
    bottom: 0;
    border-bottom: 1px solid #fff;
    border-left: 1px solid #fff;
    -webkit-transform-origin: bottom left;
    transform-origin: bottom left;
  }
  .abutton span:after {
    top: 0;
    right: 8px;
    border-top: 1px solid #fff;
    border-right: 1px solid #fff;
    -webkit-transform-origin: top right;
    transform-origin: top right;
  }
  footer .abutton {
    font-size: 21px;
  }
  .abutton:hover {
    color: #666;
  }
  .abutton:hover span:before,.abutton:hover span:after {
    background-color: #fff;
  }
  #button-frame { 
    background: #666;
    min-height: 200px;
    padding: 20px; 
  }

HTML：

<div id="button-frame">
  <a class="abutton" href="#"><span></span>Learn More</a>
</div>

可以使用仅使用CSS和无图像的角度角设计此按钮

3 个答案:

剪辑路径解决方案