如何制作这个按钮是带有角度，投影，插入阴影的CSS，宽度灵活

Question

如何制作这个按钮是带有角度，投影，插入阴影和宽度灵活性的CSS？

我试图在这里http://jsfiddle.net/jitendravyas/6RsnN/，但不知道如何给它提供角度以及如何在它周围创建切口边框。

按钮的宽度应该是灵活的。

我只是为iPhone制作这个，所以允许完整的CSS3。

Answer 1

final result是：

pure css blue button http://img832.imageshack.us/img832/8258/664d7b5656434db68cbee8b.png

flexibility的演示：

虽然我试图在图片中制作一个按钮，但有些部分可能不一样。将其视为概念验证。

这个按钮可以是纯CSS ，只有很多额外的标记和这个标记：

<a class="btn">
    <span class="triangle"></span>
    <span class="btn_inner">
        <span class="triangle"></span>
        Back
    </span>
</a>

使用box-shadow创建三角形的主要技巧包括以下几个步骤：

• 第1步。创建元素'.triangle' - 它将是真正三角形的包装。
• 第2步。应用position: absolute;，修复其width和height：
  红色背景色为演示版
• 第3步。创建大方形元素'.triangle :: before' - 在第6步之后它将是'真正的'三角形
• 第4步。将它旋转45度（transform: rotate(45deg)）。

• 第5步。添加框阴影 步骤3之后的结果是：
  

• 第6步。添加overflow: hidden; Ta-dum！
  

在.tag_inner上使用相同的技巧，但box-shadow应该不是inset，而是正常的。

请注意，如果您将使用此技巧，请始终检查必须使用哪些vendor前缀，并在最后一个位置放置不带前缀的属性。

更新：让标记更具语义性 - 只有一个元素可用于三角形技巧。

Answer 2

这是您的角度，但由于它已经是边框，因此您无法在其上设置边框：

body {padding:40px; background-color: #1693da;}
.input {
    display:block;
    text-decoration:none;
    padding:10px 60px;    
    background:#117ebb;
    font-size:60px;
    color:#fff;
    border-radius: 20px;
    box-shadow: 0px 10px 0px #003355;
    position:relative;
}

.input:after {
    position:absolute;
    top:0;
    left:-32px;
    content:" ";
    width: 0;
    height: 0px;
    border-top: 45px solid transparent;
    border-bottom: 45px solid transparent;
    border-right:45px solid #117ebb;
}