私は、設計機関から提供されたこれらの逆曲線タブのcssをコーディングする方法に固執しました。
ここを参照してください：http：//max-guedy.com/images/tab.png
質問する
2475 次
6 に答える
3
EDITは。で例を追加しましたhover state。
私はそれをどのように行うかというデモを作成しました：
jsBinデモ
- ul要素全体に茶色を設定しました
- 曲線の25x52スプライト画像.png:(ホバー時にbg位置を変更します）
http://img401.imageshack.us/img401/258/bg2d.png要素に設定し
liますが、bgの色はありません。 - ここで最も重要なのは、
li要素に対してより高いz-indexを設定し、それを減らすことです。hover aアンカーが前の要素画像の下に「非表示」になるように、要素の左パディングとそれぞれの左マージンを設定するように注意してください。
あなたがより広いリンクを持つことができ、あなたのテンプレートが仕事をすることを完了しました！
そしてこのCSS：
ul#nav{
height:26px;
background:#A15049;
border-bottom:1px solid #fff;
}
ul#nav li{
position:relative;
background:transparent url(http://img401.imageshack.us/img401/258/bg2d.png) no-repeat right top;
height:26px;
display:inline;
float:left;
padding:0 25px 0 5px;
z-index:1;
}
ul#nav li a{
padding-left:24px;
margin-left:-24px;
height:26px;
display:block;
color:#fff;
}
ul#nav li:hover{
z-index:0;
background: url(http://img401.imageshack.us/img401/258/bg2d.png) no-repeat right -26px;
}
ul#nav li:hover a{
background:#CE392C;
}
于 2012-05-20T22:08:08.213 に答える
2
CSSでこの種のことを達成することはほぼ可能です。
非常に難しいですが、可能です。
デフォルトでborder-radiusは、もちろん、通常の丸みを帯びた角しかありません。
半径の値を調整することで、それらをいくつかの興味深い形状に伸ばすことができます。これはあなたにあなたの目標への道のいくつかを得るでしょう。
しかし、ここでの本当の秘訣は、タブの丸みを帯びた部分を取得するために、CSS:beforeと:after疑似セレクターを使用して追加のスタイリング要素を作成することです。これにさらに追加する必要がありますborder-radius。
テクニックはここで説明されています：http：//css-tricks.com/better-tabs-with-round-out-borders/ ...かなり単純な垂直型のタブですが、しかし、それは、CSSでこれを実行したい場合に重要となる、ターンアウト効果を達成する方法を説明するのに役立ちます。
また、これは古いバージョンのIEでは機能しないことにも注意してください。IE8はとをサポートしていますが、サポート:beforeして:afterいませんborder-radius。それを修正するためにCSS3Pieのようなハックが存在しますが、この種の目的でそれらを使用することはお勧めしません。壊れそうです。
上記のすべてが非常にトリッキーで、実際には価値がないように聞こえる場合、私は同意する傾向があります。この場合、いくつかの単純な画像がタブに適していることがわかると思います。賢くしたい場合は、SVGを試してそれらを描画することもできますが、これには古いバージョンのIEでも問題があります。
お役に立てば幸いです。
于 2012-05-20T22:11:12.017 に答える
1
画像を使用する方が簡単です。
しかし、CSSの使用を主張する場合は、多くのCSSを使用する必要があると思いますborder-radius
于 2012-05-20T21:59:51.063 に答える
1
それは興味深い挑戦です。
私の最初のアイデアは、タブにスキュー変換を適用し、右上隅に境界線の半径を適用し、疑似要素を使用して丸みを帯びた下部を処理することでした。
残念ながら、これは醜いですhttp://dabblet.com/gist/2759785
それでも、純粋なCSSでそれを行うためのより良い方法がなければならないというのは私を悩ませます。
于 2012-05-20T22:50:17.353 に答える
0
可能だと思いますが、特にIE <9では機能しないため、かかる時間は価値がありません...
私が過去にcss-tricksで使用した良いチュートリアルがあります
ただし、他の方からも指摘されているように、画像の使用をお勧めします。
于 2012-05-20T22:06:38.890 に答える
0
これを実現するのに、CSSはそれほど必要ありません。確かに、希望の傾斜を得るには、半径をおもちゃにする必要があります。
HTML
<div role="tablist">
<a href="#" role="tab" aria-controls="active-tab1" aria-selected="true">active tab</a>
<a href="#" role="tab" aria-controls="active-tab2">inactive tab</a>
<a href="#" role="tab" aria-controls="active-tab3">inactive tab</a>
</div>
<div class="pane">
<section id="active-tab1" role="tabpanel">
<p>Show whatever</p>
<p>You Want</p>
<ul>
<li>inside</li>
<li>This</li>
<li>Section</li>
</ul>
</section>
<section id="active-tab2" role="tabpanel">
</section>
<section id="active-tab3" role="tabpanel">
</section>
</div>
CSS
[role=tablist]{padding:15px 15px 0;margin-left:88px;}
[role=tab]{
color:#222;
display:inline-block;
padding-left:15px;
padding-right:15px;
text-decoration:none;
line-height:44px;
position:relative;
min-width:150px;
text-align:center;
border-radius:15px 15px 0 0}
[role=tab]:hover{background-color:#ecf0f1;color:#222;}
[role=tab][aria-selected=true]{
background-color:#3498db;
color:white; }
[role=tab]:before,
[role=tab]:after{
content:'';
border-bottom:10px solid #3498db;
position:absolute;
bottom:-10px;
width:44px;
height:22px;
z-index:1; }
[role=tab][aria-selected=true]:before{
left:-44px;
border-right:10px solid #3498db;
border-bottom-right-radius:25px;
}
[role=tab][aria-selected=true]:after {
right:-44px;
border-left:10px solid #3498db;
border-bottom-left-radius:25px;
}
.pane{
background-color:#3498db;
padding:25px;
margin-left:5px;
margin-right:5px;
color:white;
border-radius:15px;
}
そして、それでもスリムにできる可能性があり、約10分で完成しました。
于 2015-09-24T23:05:10.790 に答える