css - このボタンの作り方はCSSでAngled、Drop shadow、Inset shadowで幅を自由に変えられる

Question

このボタンを作る方法は CSS で、Angled 、Drop shadow、Inset shadow で幅に柔軟性がありますか?

ここで作成しようとしました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;
  

.tag_inner同じトリックを使用しますが、正常box-shadowではありません。inset

このトリックを使用する場合は、常にどのvendorプレフィックスを使用する必要があるかを確認し、プレフィックスのないプロパティを最後の場所に配置することに注意してください。

更新:マークアップをよりセマンティックにします — トライアングル トリックの要素は 1 つだけにします。

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;
}