4

CSSで、次のことを達成するにはどうすればよいですか: ここに画像の説明を入力

私の試み：

<div id="slope"></div>

#slope{
    width: 100px;
    border-top: 20px solid #000;
    border-right: 90px solid #fff;
}

しかし、それから私は物事を実線ではなく線のように見せる方法にこだわっています

私はraphael JSを試しましたが、動作しますが、この要素をjQueryのアニメーションに組み込む必要があります.raphaelはSVGを使用しており、jQueryでうまく動作しないようです.

css3/html5 は問題ありません。safari/chrome がサポートしていれば問題ありません。

スロープセクションが配置されている場所を変更できる必要があります（例：中央のスロープセクションを少し左に移動します）。

4

3 に答える 3

9

次の HTML があるとします。

<span class="left"></span><span class="slope"></span><span class="right"></span>​

.left次の CSS は、要素の幅に応じて「勾配」を左または右に移動して、希望どおりに動作します。

span {
    min-height: 1em; /* to give a common height to all spans */
    display: inline-block; /* to enable the spans to take a specified dimension */
}
span.left {
    position: relative; /* to allow for the element to be shifted slightly */
    top: 0.15em; /* to join the border with the slope of the next element */
    width: 5em;
    border-top: 0.15em solid #000;
}

span.right {
    width: 10em;
    border-bottom: 0.15em solid #000;
}

span.slope {
    position: relative; /* to allow the generated content to be 
                           positioned relative to this one */
    background-color: #000; /* the 'slope' color */
    overflow: hidden;
    width: 1em; /* affects the 'width' of the slope */
}

span.slope::before {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    border: 0.45em solid #fff; /* masks the background-color of the span */
    border-top-color: transparent; /* allows the ::after element's 
                                      borders to show through */
    border-right-color: transparent;
}

span.slope::after{
    content: '';
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    border: 0.45em solid #fff;
    border-bottom-color: transparent;
    border-left-color: transparent;
}

<a href="http://jsfiddle.net/davidThomas/M6FXZ/1/" rel="noreferrer">JS Fiddle のデモ。

JS Fiddle のデモ。スロープの「ストローク」がより広い。

これは (疑似要素をサポートするブラウザーで) 明らかに可能ですが、非常に複雑なアプローチであり、可能であれば、キャンバスまたは変換ベースのソリューションを代わりに使用する必要があることに注意してください)。

OPからのコメントに応じて更新されました（以下）：

span{min-height: 1em} をより高い値に変更しましたが、高さに応じて勾配が調整されないようです....または何か間違っていますか?

要素の高さを変更するとspanうまくいくはずですが、奇妙な結果が得られます。次の CSS の変更 (残りの CSS はそのまま):

span {
    min-height: 1em; /* to give a common height to all spans */
    display: inline-block; /* to enable the spans to take a specified dimension */
}

これにつながります：

これは最初は奇妙に思えるかもしれませんが、生成されたコンテンツの境界線を使用して.slope要素の背景色を隠していたことを思い出すと、特にそれらの境界線に別の色を割り当てると、より理にかなっています。

span {
    min-height: 1em;
    display: inline-block;
}
span.slope::before {
    /* everything else untouched */
    border: 0.45em solid #f00;
}
span.slope::after{
    border: 0.45em solid #f90;
}

この時点で、勾配の「幅」を維持するには、生成されたコンテンツの境界線の幅も増やす必要があることが明らかになります。

span {
    min-height: 1em;
    display: inline-block;
}
span.slope::before {
    /* everything else untouched */
    border: 0.95em solid #f00;
}
span.slope::after{
    border: 0.95em solid #f90;
}

結果は次のとおりです。

.

次に、簡単に見える色を削除すると、少し整頓され、大きくなります。

.

于 2012-07-22T14:03:35.390 に答える
7

html5キャンバスを使用します。これが私のフィドルの例です。

JS：

var canvas = document.getElementById('mycanvas');
if (canvas.getContext)
{ 
    // use getContext to use the canvas for drawing
    var ctx = canvas.getContext('2d');

    ctx.lineWidth = 2;
    ctx.beginPath();
    ctx.moveTo(10,10);
    ctx.lineTo(100,10);
    ctx.lineTo(120,30);
    ctx.lineTo(220,30);
    ctx.stroke();
} 
else 
{
    alert('Not supported');
}
​

HTML：

 <canvas id="mycanvas"></canvas>​
于 2012-07-22T13:45:01.120 に答える
5

とを使用transformしrotateます。

.slope{
    margin-top: 30px;
    width: 100px;
    border-bottom: solid 3px black;
    -o-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
}

フィドル

2本の線で結ばれた坂：フィドル

于 2012-07-22T13:39:24.583 に答える