CSS 的按钮形状

Question

我正在尝试使用 css 伪 :after/:before class.

创建一个 'easy' 按钮形状

我已经阅读了一些关于此的博客和文章，但没有一个形状看起来像我的。所以我自己试了一下。但是这个我有些东西，我想不通。

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

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

有人可以给我提示吗？

Answer 1

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

Answer 2

尺寸不完全一样，但你可以玩下面的：

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

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

Answer 3

您可以使用 :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>

CSS 的按钮形状

Button shape with CSS

css

shape