css - 如何制作这个按钮是 CSS with Angled , Drop shadow, Inset shadow，宽度灵活

Question

如何使这个按钮是具有角度、阴影、插入阴影的 CSS，宽度灵活？

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

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

我只为 iphone 制作这个，所以允许使用完整的 CSS3。

Answer 1

最终结果是：

纯 css 蓝色按钮 http://img832.imageshack.us/img832/8258/664d7b5656434db68cbee8b.png

灵活性的展示：

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

这个按钮可以是纯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;
}