ios – 如何使用CSS制作div尖的一面？

我正在尝试创建一个像这样的尖头按钮：

到目前为止,我只能做到这一点：

我认为增加水平边界半径会使它变得锋利,但它只会使圆度更长.

HTML

<a class="button">Back</a>

CSS

.button {
    display: inline-block;
    height: 3em;
    padding: 0 0.7em 0 1.4em;
    border: 0.1em solid black;
    border-radius: 3em 0.4em 0.4em 3em / 1.5em 0.4em 0.4em 1.5em;
    background: -moz-linear-gradient(
        top,#fff,#ccc
    );
}

解决方法

考虑到这一点,这是一个更优雅的解决方案,允许更有效的样式和仅使用一个HTML元素.使用这种方法,我们可以完全实现您的概念结果.

HTML

<a href="#" class="button">Back</a>

CSS

a.button {
    text-decoration:none;
    color:#111;
    text-shadow:0 1px 0 #fff;
    font-weight:bold;
    padding:10px 10px;
    font-size:14px;
    border-radius:0 8px 8px 0;
    -webkit-border-radius:0 8px 8px 0;
    float:left;
    margin-left:30px;
    margin-top:20px;
    position:relative;
    font-family:verdana;
    color:#3b3d3c;
    border:1px solid #666;
    border-left:0;
    background: -moz-linear-gradient( top,#eee 0%,#bbb 100%);
    background: -webkit-linear-gradient( top,#bbb 100%);  
}
a.button:after {
    content:"";
     width:25px;
     height:25px;
     background: -moz-linear-gradient( left top,#bbb 100%);
     background: -webkit-linear-gradient( left top,#bbb 100%);
     -moz-transform: rotate(45deg);
     -webkit-transform: rotate(45deg);
     display:block;
     position:absolute;
     top:5px;
     left:-14px;
     z-index:-1;
     border:1px solid  #666;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
a.button:after{
    border-left:0;
    left:-13px;
}

最后一条规则适用于Chrome,否则会导致结果略有不同.

希望这可以帮助.