使用css3制作不同形状的按钮

Question

我使用css制作三角形按钮时遇到了麻烦，它有点儿麻烦，我该如何解决？

这里有一个小提琴： https ： //jsfiddle.net/Adrianalings/jy11o85s

.btn {
    position: fixed;
    bottom: 50%;
    height: 0px;
    background-color:transparent;
    border-top: 15px solid transparent;
    border-left: 20px solid red;
    border-bottom: 15px solid transparent;
}

Answer 1

这是解决方案=）

 .btn { width: 0px; height: 0px; -webkit-transform:rotate(360deg); border-style: solid; border-width: 50px 0 50px 86.6px; border-color: transparent transparent transparent #C40006; background-color:transparent; } 

 <button class="btn"></button>