css - 曲線ボーダーの CSS 実装

Question

最近、Dribbble のデザインコンセプトを目にして、とても刺激を受けました。特にサイドバーの上部と下部がU字型に湾曲していることから、タブスタックやフローダイアグラムを作成する上で大きなヒントになりました。アルファ画像でも作れますが、純粋なCSSの方がいいですし、CSS3でも構いません。しかし、私は CSS3 に慣れていないので、誰かがそれを行う方法を提案してくれることを願っています。

上部にU字型の凹み、下部に同じ形の凸部が見られます

http://dribbble.com/shots/1213195-CMS-Concept/attachments/162177からの抜粋

http://dribbble.com/shots/1213195-CMS-Conceptのオリジナルデザイン

score 3 · Accepted Answer

多くの優れたアプローチがあります。別のアプローチで、すべての HTML5 ブラウザーと互換性のあるソリューションを追加したかったのです。

純粋な CSS ソリューションとして単純明快ではありませんが、キャンバスを使用して境界線を生成するため、グラデーションなどを生成する拡張機能も提供します。

オンラインデモはこちら

これにより、次のようになります。

これを JavaScript から使用する簡単な例を次に示します。

この関数は次の 3 つの引数を取ります。

ボーダーを追加する要素
曲線の高さ
背景の色

例えば：

curlyBorder(border1, 24, '#073');
curlyBorder(border2, 24, '#037');

HTML:

<div id="border1">Text 1</div>
<div id="border2">Text 2</div>

CSS: (主に寸法と色を定義するためだけに)

#border2 {
    position:relative;
    top:-25px;
}
#border1, #border2 {
    width:300px;
    height:150px;
    padding:30px 16px;
    color:#fff;
    font:26px sans-serif;
    text-align:center;
}

JavaScript:

グラフィック付きのキャンバスを生成し、要素の背景として設定する関数。コードは最適化されていません。いずれにせよ、グラデーション、より良い境界線などをサポートするように拡張できます。ここでは、例のために最小限に抑えました。

function curlyBorder(el, ch, color) {

    var canvas = document.createElement('canvas'),
        ctx = canvas.getContext('2d');

    render();

    function render() {

        var w = el.clientWidth,
            h = el.clientHeight,
            t = w * 0.333;

        canvas.width = w;
        canvas.height = h;

        /// define border
        ctx.moveTo(0, 0);
        ctx.lineTo(t, 0);

        /// create one curve positive direction
        renderCurve(t, ch, 1);

        ctx.lineTo(w, 0);
        ctx.lineTo(w, h - ch);
        ctx.lineTo(w - t, h - ch);

        /// create one curve negative direction
        renderCurve(t, ch, -1);

        ctx.lineTo(0, h - ch);
        ctx.closePath();

        /// color or gradient
        ctx.fillStyle = color;
        ctx.fill();

        /// set this canvas as background to element
        el.style.background = 'url(' + 
            canvas.toDataURL() + ') no-repeat top left';

        /// we use trigonometry to make the curved line:
        function renderCurve(t, ch, d) {

            var x, sx, ex,dg = -90, dgd = 360 / t, y;

            if (d > 0) {
                x = t;
                for(; x < t * 2; x++) {
                    y = ch * 0.5 * Math.sin(dg * Math.PI / 180);
                    ctx.lineTo(x, y + ch * 0.5);
                    dg += dgd;
                }
            } else {
                x = t * 2;
                for(; x > t; x--) {
                    y = ch * 0.5 * Math.sin(dg * Math.PI / 180);
                    ctx.lineTo(x, h - ch * 0.5 + y);
                    dg += dgd;
                }
            }
        }
    }
}

これの欠点は、CSS ほど効率的ではないことですが、いくつかの要素のみを維持すれば、パフォーマンスは許容範囲を超えています。

要素の位置を調整する必要があります。次の要素を相対的な位置とオフセットでハードコーディングしました。これは、他の CSS ルールを使用して (または関数自体に実装することで) より適切に解決できます。

ただし、良い面としては、スケーリングされた画像を使用する場合と比較して、デザインの可能性がより自由になり、サイズを変更して高品質のレンダリングを得ることができます.

キャンバスをサポートするすべての HTML5 ブラウザーで同じようにレンダリングされます (exCanvas を使用した IE < 9 でもこれをレンダリングできると思いますが、チェックしていません)。

score 3 · Accepted Answer

CSS3transformプロパティを使用して 2 つの疑似要素:beforeを歪め:after、色付きの各セクションの上部に配置します。緑の唇を見せるために、緑の下にスタブとして配置する必要がありました.

フィドルを見る

主な形状の CSS は次のとおりです。

/* Shape */

.flap {
    display: block;
    position: relative;
}
.flap:before, .flap:after {
    content:'';
    display: block;
    position: absolute;
    top: -2em;
    z-index: 5;
    width: 100%;
    height: 4em;
    border-radius: 1em;
    background-color: inherit;
    border: inherit;
    border-width: 4px;
}
.flap:before {
    left: -50%;
    -webkit-transform: skew(60deg);
    -moz-transform: skew(60deg);
    -o-transform: skew(60deg);
}
.flap:after {
    right: -50%;
    -webkit-transform: skew(-60deg);
    -moz-transform: skew(-60deg);
    -o-transform: skew(-60deg);
}

score 1 · Accepted Answer

各 div の最後に通常の境界線を作成し、div の中心に絶対位置に図形を配置します。

CSS 3 を使用して、border プロパティを使用して図形を描画できます。

.semicirclebottom{
 height:45px;
 width:90px;
 border-radius: 0 0 90px 90px;
 -moz-border-radius: 0 0 90px 90px;
 -webkit-border-radius: 0 0 90px 90px;
 background:green;
 }

 .oval{
 height:180px;
 width:45px;
 border-radius: 90px / 45px;
 -moz-border-radius:90px / 45px;
 -webkit-border-radius: 90px / 45px;
 background:green;
 }

湾曲した三角形を使用すると、要件に近づけることができます..

 div {
transform: rotate(45deg);
-ms-transform: rotate(45deg); /* IE 9 */
-webkit-transform: rotate(45deg); /* Safari and Chrome */
-o-transform: rotate(45deg); /* Opera */
-moz-transform: rotate(45deg); /* Firefox */
background-color:green;
width:100px;
height:100px;
position:absolute;
top:20px;
left:-50px;
-webkit-border-radius: 0 20px 0 0;
-moz-border-radius: 0 20px 0 0;
border-radius: 0 20px 0 0;

}

score 0 · Accepted Answer

Js フィドルを確認する

cjross フィドルの修正

http://jsfiddle.net/MS5J7/6/

.blue-flap {
    background-color: #4DA0E3;
    border-top: 4px solid #4DA0E3;
}

.green-flap {
    background-color: #65DA83;
    border-top: 4px solid  #65DA83;
}
.brown-flap {
    background-color: #222222;
    border-top: 4px solid #222222;
}

score 0 · Accepted Answer

これは私の試みであり、境界線、変換、:afterおよび:before疑似要素のその他のもので遊んでいます。

ここに画像の説明を入力

もちろん、値を調整してピクセルパーフェクトな結果を得ることができます。しかし、形の下にある小さな境界線や影を再現することはできません... :/

http://jsfiddle.net/WHvsM/

css - 曲線ボーダーの CSS 実装

7 に答える 7

Related

Reference