jquery - 特定の形状のdiv

Question

このリンクの「チーム」および「協力」divで使用されているような形状の水平ナビゲーションバーを作成する必要があります。そのためのライブラリはありますか？リンク

Answer 1

このWebサイトでは、背景画像を使用して外観を実現しています。具体的には、スプライト（またはCSSスプライト）と呼ばれる手法を使用しています。

この手法は、基本的に、複数の画像を含む1つの画像を使用するだけで、各画像は別々に使用されます。単一の画像はbackground-position、大きな画像のどの部分を使用するかを基本的に選択できるルールとして使用されます。この手法の主な目的は、ページの読み込みを高速化するためにHTTPリクエストの量を減らすことです。

より良い説明については、 http：//css-tricks.com/css-sprites/を参照してください。

リンク先のウェブサイトで使用しているスプライトは次のとおりです。

http://hitmo-studio.com/images/sprites-set-1.png

スプライト画像の上部に4つのボックスが表示されます。2番目のボックス（チーム）がスプライト画像の正しい部分をどのように使用するかの例を次に示します。

.list-c li.team a {
background-position: -246px 0;
}

Answer 2

このためのライブラリは必要ありません。CSSだけです。

サイトにリンクするページでは、背景画像に画像スプライトを使用して、歪んだ（挿入/開始三角形）形状の錯覚を作成しているようですが::before、::after疑似要素を処理できる準拠したブラウザを使用してそれをエミュレートすることは可能です：

.box {
    width: 150px; /* or whatever */
    height: 150px;
    background-color: #f90; /* adjust to your taste */
    padding: 0.5em;
    position: relative; /* required to position the pseudo elements */
    margin: 0 auto; /* used to move the box off the edge of the page, adjust to taste */
}

.box::before {
    content: ''; /* required in order for the ::before to be visible on the page */
    position: absolute;
    top: 50%;
    left: 0;
    margin: -25px 0 0 0; /* to position it vertically centred */
    border-right: 25px solid transparent;
    border-bottom: 25px solid transparent;
    border-top: 25px solid transparent;
    border-left: 25px solid #fff; /* forms the triangular shape on the left */
}

.box::after{
    content: '';
    position: absolute;
    top: 50%;
    right: 0;
    margin: -25px -50px 0 0;
    border-right: 25px solid transparent;
    border-bottom: 25px solid transparent;
    border-top: 25px solid transparent;
    border-left: 25px solid #f90;
}​

JSフィドルデモ。

このアプローチの使用には問題があることに注意してください。

1. ページの背景は左側の三角形からは見えません（白一色であるため）。その三角形を作成するとtransparent、境界線からは見えますが、.box div要素の背景色のみが表示されます。

2. ::beforeおよび::after疑似要素をで配置するposition: absoluteということは、これらの要素がのテキストの上に表示されることを意味しますdiv。したがって、その問題を減らすために、おそらくそれと疑似要素のを調整する必要があります。これは単なるデモンストレーションpaddingです。divborder-width