带有CSS的按钮形状

Question

我正在努力创造一个“轻松”的感觉。按钮形状与css pseudeo：在/之前。：

我已经阅读了一些关于此的博客和文章，但没有形状看起来像我的。所以我自己尝试了。但这是我的事情，我无法弄清楚。

＆＃13;

＆＃13;

button{
    height: 50px;
    width: 250px;
    border: solid 2px #000;
    border-bottom: none;
    background: orange;    
  }
  button:after{
      height: 0;
      width: 125px;
      content:"";
      position: absolute;
      border-top: transparent 30px
      border-right: solid 2px #000;
    }
     button:before{
      height: 0;
      width: 125px;
      content:"";
      position: absolute;
      border-top: transparent 30px
      border-left: solid 2px #000;
    }

＆＃13;

<button>Let's do it</button>

＆＃13;

＆＃13;

＆＃13;

有人可以给我一个提示吗？

Answer 1

您可以使用:before和:after伪元素创建一个用于边框，另一个用于橙色背景。

button {
  height: 50px;
  width: 250px;
  border: solid 2px #000;
  border-bottom: none;
  background: orange;
  position: relative;
}
button:after,
button:before {
  border-style: solid;
  border-width: 50px 110px 0 140px;
  border-color: #FFA500 transparent transparent transparent;
  content: '';
  position: absolute;
  left: -2px;
  top: 100%;
}
button:after {
  transform: translateY(-1px);
}
button:before {
  border-color: black transparent transparent transparent;
}

<button>Let's do it</button>

Answer 2

尺寸不完全相同，但您可以使用以下尺寸：

＆＃13;

＆＃13;

#pentagon {
    margin-top: 45px;
    position: relative;
    width: 250px;
    border-width: 70px 0 0;
    border-style: solid;
    border-color: orange transparent;
}
#pentagon:after {
    content: "";
    position: absolute;
    height: 0;
    width: 0;
    top: -30px;
    left: 0px;
    border-width: 50px 125px 0 125px;
    border-style: solid;
    border-color: orange white;
}

＆＃13;

<div id="pentagon"></div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

你可以玩这个，它有一个像你的图像http://www.cssarrowplease.com/

的边框