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

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.

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

*, *: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;
}

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