可以仅使用CSS而不使用图像来设计带有斜角的按钮 [英] Possible to Design This Button with Angled Corners Using Only CSS and No Images

问题描述

我正在尝试仅使用CSS而不使用图像来设计按钮.问题出在左下角和右上角，当按钮位于纯色背景上时，我正在使用背景色来实现此目的.问题是背景不是纯色时，您可以看到角落，如下面的演示中所示.

因此，我想提出一种通用方法来对仅包含CSS且没有图像的按钮进行编码.

谢谢！

此处是按钮→ 的演示/p>

这是我演示中的HTML:

 < div id ="banner">< div id ="button-box">< a class ="btn-cornered btn-cornered-dark-bg" href =#">< span>了解详情</span></a></div></div> 

和CSS:

  #banner {背景:url('https://d3vv6lp55qjaqc.cloudfront.net/items/2D1R0A0B1q031R1C2P26/Image%202017-11-07%20at%201.57.1​​7%20PM.png?X-CloudApp-Visitor-Id=8b9380dd59b56afec49e5f1e289c66953')无重复中心-420px；背景尺寸:封面；显示:块；宽度:100％;高度:200px；文本对齐:居中；}#button-box {填充:50px 0;}/* 按钮 */.btn-cornered {padding-left:20px;padding-right:20像素；职位:相对显示:inline-block;行高:53px；文本对齐:居中；颜色:#fff;font-size:24px;边框:1px实线#fff;border-bottom-left-radius:10px;border-top-right-radius:10px;文字修饰:无；}.btn-cornered:之前{位置:绝对；左:-1px;底部:-1px；内容: "";border-bottom:11px实心#fff;右边框:11px纯透明；}.btn-cornered:之后{位置:绝对；左:-2px;底部:-2px;内容: "";边框底部:11像素实线；右边框:11px纯透明；}.btn-cornered span {顶部:-2px；左:-1px;职位:相对padding-right:20像素；显示:块；-webkit-transition:所有0.3s缓解；过渡:所有0.3s缓解；}.btn-cornered span:before {位置:绝对；内容: "";边框底部:11px透明的纯色；右边框:11px实心#fff;}.btn-cornered span:之后{位置:绝对；内容: "";边框底部:11px透明的纯色；右边框:11px实线；}/*深色背景样式*/.btn-cornered-dark-bg {高度:53像素；}.btn-cornered-dark-bg:之后{边框底色:#000000;}.btn-cornered-dark-bg span {最大宽度:无；行高:58px;font-size:24px;高度:53像素；宽度:calc(100％+ 2px);}.btn-cornered-dark-bg span:之前{右:1px；顶部:1px；}.btn-cornered-dark-bg span:之后{border-right-color:#000;右:0px；顶部:0px；} 

解决方案

下面是一个使用伪元素和一个额外的跨度的示例，该跨度被倾斜以制作成角的角.诀窍是隐藏按钮上的溢出内容，并稍加精巧地将 span 的倾斜边框正确对齐.

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

  *，*:之前，*:之后{框大小:border-box；}身体 {背景:steelblue；}按钮 {背景:透明；填充:10px 20px;职位:相对边界:无；边距:20px;溢出:隐藏；白颜色;}按钮::之前{显示:块；位置:绝对；最高:0;左:0；底部:15px；右:15px；内容: '';左边框:1px纯白色；边框顶部:1px纯白色；}按钮:: {之后显示:块；位置:绝对；底部:0;正确:0；顶部:15px；左:15px；内容: '';右边框:1px纯白色；边框底:1px纯白色；}按钮跨度{显示:块；位置:绝对；z索引:-1；最高:0;右:-18px；底部:0;左:15px；边框:1px纯白色；转换:歪斜(45deg);transform-origin:左下；}  

 < button>< span></span>注册并保持联系</button>  

I'm trying to design a button using only CSS, and no images. The issue is with the bottom-left and top-right corners, and I'm using a background-color to achieve this when the button is on a solid background color. The issue is when the background is not a solid color and you can see the corners, like in the demo below.

So, I'd like to come up with a universal way to code this button with just CSS and no images.

Thanks!

Here is a demo of the button →

Here is the HTML I have in my demo:

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

And the 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;
}

解决方案

Here's an example using pseudo elements and an extra span that is skewed to make the angled corners. The trick is hiding the overflow on the button and, with a little finesse, correctly lining up the skewed borders from the span.

I'm not fully satisfied as it requires the extra span and seems a bit fragile when changing font sizes, but here it is:

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

这篇关于可以仅使用CSS而不使用图像来设计带有斜角的按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！