CSS - 带有两个切角的按钮

Question

大家好，我想创建一个<button>，就像您在上图中看到的background: transparent; border: 1px solid #999 class Desc(object): @property def color_desc(self): return 'Color is ' + self.color @property def brand_desc(self): return 'Brand is ' + self.brand class Text(Desc): def __init__(self): self.color = 'blue' self.brand = 'volvo' def main(): t = Text() print t.color_desc if __name__ == '__main__': main() 一样。我已经检查了之前类似的question同样的问题，但由于它已经3年了，我会检查是否有更好的解决方案。

您对如何实现此结果有所了解吗？提前感谢您的回复！

Answer 1

这是一个JS小提琴我用:before和:after的小技巧。

See this fiddle

button { background: #fff; padding: 8px 10px; border: 1px solid #333; box-shadow: none; position: relative;  }

button:before {content: ""; width: 10px; height: 15px; position: absolute; border-right: 1px solid #333; left: -5px; top: -6px; transform: rotate(45deg); background: #fff}

button:after {content: ""; width: 10px; height: 15px; position: absolute; border-left: 1px solid #333; right: -5px; bottom: -6px; transform: rotate(45deg); background: #fff}

您可以将:before和:after的背景替换为您的背景，以便正确使用。

Answer 2

您可以使用destroygameglobals()和:before 伪元素

执行相应操作

:after

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%);
}

或者您可以使用 SVG

<button>CLICK ME</button>

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

Answer 3

你不应该使用透明背景，你应该像这样使用url属性

＆＃13;

＆＃13;

.selector{
    background: url(imageAddress);
  }

＆＃13;

＆＃13;

＆＃13;