CSS-具有两个切角的按钮 [英] CSS - Button with two cut off corners

问题描述

大家好，我想创建一个< button> ，如上图所示，其背景为 background:transparent;边框:1px固定#999 .我已经检查了先前的类似问题问题，但是由于我3岁了，我要检查是否有更好的解决方案.

Hi all, I want to create a <button> like the one you can see in the above image, with background: transparent; border: 1px solid #999. I have checked a previous similar question with the same problem, but since it's 3 years old I would to check if there are better solutions.

您对如何实现此结果有想法吗?预先感谢您的答复！

Do you have an idea on how to achieve this result? Thanks in advance for your replies!

推荐答案

您可以使用:before 和:after 伪元素strong>

You could do something like this with :before and :after pseudo elements

body {
  background: white;
}
button {
  padding: 20px 45px;
  border: 1px solid #999999;
  display: inline-block;
  position: relative;
  background: white;
  color: #999999;
}
button:before, button:after {
  height: 25px;
  width: 25px;
  background: white;
  position: absolute;
  content: '';
}
button:before {
  top: 0;
  left: 0;
  border-right: 1px solid #999999;
  transform: rotate(49deg) translate(-71%);
}
button:after {
  bottom: 0;
  right: 0;
  border-left: 1px solid #999999;
  transform: rotate(49deg) translate(71%);
}

<button>CLICK ME</button>

或者您可以使用 SVG

button {
  display: inline-block;
  background: transparent;
  border: none;
}
polygon {
  stroke: #999999;
  fill: transparent;
  stroke-width: 1px;
  transition: all 0.3s ease-in;
}
text {
  fill: #999999;
  font-size: 20px;
  transition: all 0.3s ease-in;
}
button:hover polygon {
  fill: black;
}
button:hover text {
  fill: white;
}

<button>
  <svg width="200px" height="100px">
    <polygon  points="165.083,84.769 15.971,84.769 15.971,28.227 33.742,11.263 185.114,11.263 185.114,66.837 "/>
    <text x="100" text-anchor="middle" y="55">CLICK ME</text>
  </svg>
</button>

这篇关于CSS-具有两个切角的按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！