如何创建一个左上角和右下角为 45 度直角的按钮？ [复制]答案

【问题标题】：How to create a button with the top left and bottom right corner is 45 degrees straight angle? [duplicate]如何创建一个左上角和右下角为 45 度直角的按钮？ [复制]
【发布时间】：2020-10-23 04:26:45
【问题描述】：

我想创建一个左上角和右下角为 45 度直角的按钮。可以在 HTML/CSS 中创建这样的按钮吗？或者我必须使用图像？请指导。
这是一个按钮图像。

这是一个代码

button{
border-style: none;
height: 60px;
background: none;
border: 2px solid #000000;
padding: 0 60px;
color: #000000;
font-size: 24px;
outline: none;
border-radius: 50px 0;
}

&lt;button&gt;Button&lt;/button&gt;

【问题讨论】：

也许stackoverflow.com/questions/33690168/slanted-border-using-css 会有所帮助？或stackoverflow.com/questions/7059597/slanted-corner-on-css-box
45度角是45度角，直角是180度角。 45度直角没有意义。
是的，你是对的，但我的意思是 45 度角而不是曲线。根据图片。

标签： javascript html css button border

【解决方案1】：

在另一个多边形内使用clip-path：

<div style="
background:black;
width:fit-content;
height:fit-content;
clip-path:polygon(
0px 36px, 
36px 0px, 
100% 0px, 
100% calc(100% - 36px), 
calc(100% - 36px) 100%, 
0px 100%, 
0px 36px
);">
<button style="
outline:none;
box-shadow:none;
border:none;
font-size:24px;
padding: 18px 60px;
overflow:hidden;
background:pink;
clip-path:polygon(
2px 36px, 
37px 2px, 
calc(100% - 2px) 2px, 
calc(100% - 2px) calc(100% - 36px), 
calc(100% - 36px) calc(100% - 2px), 
2px calc(100% - 2px), 
2px 36px
);"
onclick="alert('Hi!')"
>BUTTON</button>
</div>

【讨论】：

【解决方案2】：

您可以使用:before 和:after css 选择器获得该形状。我在button 标记中添加了span，并在两个标记中添加了:before 和:after 选择器以获得这种形状。

button{
  border-style: none;
  height: 60px;
  background: none;
  border: none;
  padding: 0 60px;
  color: #000000;
  font-size: 24px;
  outline: none;
  position: relative;
}
button:before {
  content: "";
  width: 85%;
  height: 30px;
  display:block;
  border-top: 2px solid;
  border-right: 2px solid;
  position: absolute;
  right: 0;
  top: 0;
}

button:after {
  content: "";
  width: 85%;
  height: 30px;
  display:block;
  border-bottom: 2px solid;
  border-left: 2px solid;
  position: absolute;
  left: 0;
  bottom: 0;
}
button span {
  display:block;
}
button span:before {
  content:"";
  width: 38px;
  height: 2px;
  background: #000;
  position: absolute;  
  left: -5px;
  top: 14px;
  transform: rotate(-46deg); 
}
button span:after {
  content:"";
  width: 38px;
  height: 2px;
  background: #000;
  position: absolute;
  right: -5px;
  bottom: 14px;
  transform: rotate(-46deg);
}
button:hover{
  color: red;
}
button:hover:before,
button:hover:after {
  border-color: red;
}
button:hover span:before,
button:hover span:after {
  background: red;
}

&lt;button&gt;&lt;span&gt;Button&lt;/span&gt;&lt;/button&gt;

【讨论】：

请添加解释这是如何工作的 - 谢谢！