如何使用CSS和HTML5创建一个没有图像的角度按钮

Question

我对CSS有些问题。我想使用CSS和HTML5创建一个有角度的按钮，没有图像。

如何在没有图像的情况下创建它？我希望HTML5输出如下：

我试过这个按钮：

border: solid 10px;
/* the border will curve into a 'D' */
border-radius: 10px 40px 40px 10px;

我还需要创建这个

任何帮助都是适当的。

Answer 1

＆＃13;

＆＃13;

button.testBtn {
  height:50px;
  width:150px;
    background: blue;
    position: relative;
    border:none;
    text-align:left;
}
button.testBtn span{
font-weight:bold;
font-size:18px;
margin-left:10px;
}

button.testBtn:before {
    content: '';
    position: absolute;
    bottom: 0; right: 0;
    border-bottom: 50px solid white;
    border-left: 60px solid blue;
    width: 0;
}

/* ***************************************** */

button.myBtn {
  height:50px;
  width:150px;
    background: blue;
    position: relative;
    border:none;
    text-align:right;
}
button.myBtn span{
font-weight:bold;
font-size:18px;
}

button.myBtn:before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    border-top: 50px solid white;
    border-right: 60px solid blue;
    width: 0;
}

＆＃13;

<button class="testBtn">
<span>Button</span>
</button>

<br /><br /><br /><br />

<button class="myBtn">
<span>Button</span>
</button>

＆＃13;

＆＃13;

＆＃13;

为了获得后面评论中描述的形状。请检查btn与班级 myBtn

Answer 2

您可以使用此

.class{
background:#0077dd;
color:#fff;
padding:10px 20px;
    position: relative;
  display:inline-block;
  height:20px;
  
  }

a.class:after {
    width: 0;
    height: 0;
    border-top:40px solid #0077dd;
    border-right: 40px solid transparent;
    position: absolute;
    top: 0;
    right: -40px;
    content:"";
}

<a class="class">Button</a>