私はちょうどシェイプの境界線のようなタブを作る方法があるのだろうか？ もっと明確にするために、私はアスタリスクで形を描いています。私はこの境界線の形を意味します。CSSの枠線の形状 - どのように矩形の右上の角をカットオフ
*********************
***********************
*************************
***************************
***************************
***************************
***************************
***************************
このように、CSSで四角形の右上隅をカットするには？または、より最適な方法は何ですか？
境界線を使用してそのようなことを実現できます。 jsfiddleあなたが純粋なCSSを主張しているのなら、最善の答えではないかもしれませんが、出発点です。
編集：ここJsFiddle Demo
更新マークアップ
<div>
<div class="wrapper inner">
<div class="abc"></div>
<div class="container">I AM A TAB<div>
</div>
<div class="border inner">
<div class="ab"></div>
<div class="bcontainer"><div>
</div>
</div>
CSS
.inner{position:fixed;}
.border{width:72px;height:52px;z-index:-1;top:0px;}
.wrapper{width:70px;top:1px;left:1px;}
.container {background:rgb(226,226,226);text-align:center;}
.bcontainer{background:black;width:71px;height:41px;}
.abc {
width: 60px;
border-bottom: 10px solid rgb(226,226,226);
border-right: 10px solid transparent;
}
.ab{ width: 61px;
border-bottom: 11px solid black;
border-right: 10px solid transparent;}
CSSでは、四角形ではなく丸みを帯びていない罫線の形状はサポートされません。ステップ幅や画像を持つDIVの束を使うことはできますが、CSSだけでは本当に助けにはなりません。
CSS trianglesのオーバーレイを試すこともできますが、それはちょっとしたハックです。
Dupeには完全な解決策があります：http://stackoverflow.com/questions/8895273/how-to-make-angled-tab-like-this-using-css –
あなたは丸い角+三角形を意味しますか？しかし、どのように丸い角を使用しないようにするには？私はこの場合シェイプをどのように組み合わせるかについてはあまりよく分かりません。S – user592704
三角形を含むDIVを追加し、タブの角に絶対配置しなければなりません。 –
あなたはCSS3 border-radiusプロパティを使用することができます：その角を丸くすることができれば、http://www.w3schools.com/cssref/css3_pr_border-radius.asp（example）
をborder-radiusは、おそらくあなたが必要とするすべてである：あなたは、http://border-radius.com/
コーナーの角度でなければならない場合には」かなり混乱したHTMLなしでそれを得る可能性は低いです。それを行う標準のプロパティはありません。最善の選択肢は、境界の特定の部分をイメージにしてから、background-imageとbackground-positionを使用して上部の角に配置することです。
右上隅の背景画像？しかし、その規模を動的にする方法はありますか？絶対的な立場か何かが必要なのですか？ – user592704
絶対配置は必要ありません。単純にパーセンテージを使用してコンテンツを配置します。 – VoteyDisciple
border-corner-shapeを使用すると、CSS3で実装されていればcss属性でトリックを実行できました！ CSS4のドラフトで提案されていますが、冗談はありません！
実装は不確かですが、サポートが必要です。 Read： http://lea.verou.me/2013/03/border-corner-shape-is-in-danger-and-you-can-help/
ありがとうございます。しかし、私はhttp://lea.verou.me/wp-content/uploads/2013/03/bevel-4.pngを取得していません... 2つの画像はどういう意味ですか？私は1つのCSSと2つの画像を意味しますか？詳細を教えてください。 – user592704
[cssを使用してこのような角度のタブを作成する方法]（http://stackoverflow.com/questions/8895273/how-to-make-angled-tab-like-this-using -css）とhttp://stackoverflow.com/questions/6474168/how-do-i-make-corners-angled-like-this-using-css – j08691
いいえ、私は丸められていないタブの形状を作る方法を探しています – user592704
私は、複製の "三角形"部分があなたの答えだと思います。 –