5

形状の境界線のようなタブを作成する方法はありますか? より明確にするために、アスタリスクで形を描きます。私はこの境界線の形を意味します。

*********************
***********************
*************************
***************************
***************************
***************************
***************************
***************************

このために、CSSで長方形の右上隅を切り取る方法は? または、より最適な方法は何ですか？

4

5 に答える 5

5

境界線を使用して、そのようなことを実現できます。jsfiddleおそらく最良の答えではありませんが、純粋な css を主張する場合の出発点です。

編集:ここでJsFiddle デモを更新しました

マークアップ

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

</p>

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;}​
于 2012-04-17T18:00:09.693 に答える
3

CSS は、正方形や丸みを帯びていない境界線の形状をサポートしていません。階段状の幅や画像を含む多数の DIV を使用できますが、CSS だけではあまり役に立ちません。

別の方法として、いくつかのCSS 三角形をオーバーレイすることもできますが、これはちょっとしたハックです。

于 2012-04-17T17:33:53.060 に答える
2

css 属性を使用border-corner-shapeすると、トリックを実行できたはずです... CSS3 で実装されていれば! ただし、CSS4 ドラフトで提案されています。冗談ではありません。

ただし、実装は不確実であり、サポートが必要です。読む: http://lea.verou.me/2013/03/border-corner-shape-is-in-danger-and-you-can-help/

于 2013-08-19T22:58:20.820 に答える
0

その角を丸めることができれば、border-radiusおそらくそれで十分です: http://border-radius.com/

角を斜めにする必要がある場合は、かなり厄介な HTML がないと実現できない可能性があります。それを行う標準プロパティはありません。最良の代替手段は、境界線の特定の部分を画像にしてから、それを使用background-imageしbackground-positionて上隅に配置することです。

于 2012-04-17T17:34:56.877 に答える
-1

CSS3border-radiusプロパティを使用できます: http://www.w3schools.com/cssref/css3_pr_border-radius.asp (例)

于 2012-04-17T17:34:01.993 に答える