剪切路径多边形

Question

我的CSS代码是：

.myButton {
    box-shadow:inset 0px 1px 3px -50px #91b8b3;
    background-color:transparent;
    border:4px solid #566963;
    display:inline-block;
    cursor:pointer;
    color: yellow;
    font-family:Arial;
    font-size:20px;
    font-weight:bold;
    padding:12px 23px;
    text-decoration:none;
    clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);
} 

我期望文本应该是黄色，背景应该是透明的，边框应该是4px黄色，并且需要所有边都有边框，形状将与给定的按钮相同

Answer 1

您可以依靠伪元素并为边框生成特定的

clip-path

。我有一个生成器：https://css-generators.com/custom-corners/

button {
  margin: 20px;
  font-size: 20px;
  line-height: 1.6em;
  padding: 0 20px 0 10px;
  border: none;
  background: none;
  position: relative;
}

button:before {
  content: "";
  position: absolute;
  inset: -5px;
  background: #91b8b3;
  clip-path: polygon(0 0,calc(100% - 1.00em) 0,100% 1.00em,100% calc(100% - 1.00em),calc(100% - 1.00em) 100%,0 100%,0 0,5px  5px ,5px calc(100% - 5px),calc(100% - 1.00em - 2.07px) calc(100% - 5px),calc(100% - 5px) calc(100% - 1.00em - 2.07px),calc(100% - 5px) calc(1.00em + 2.07px),calc(100% - 1.00em - 2.07px) 5px,5px 5px);
}

<button>button</button>