最近、Dribbble のデザイン コンセプトを目にして、とても刺激を受けました。特にサイドバーの上部と下部がU字型に湾曲していることから、タブスタックやフローダイアグラムを作成する上で大きなヒントになりました。アルファ画像でも作れますが、純粋なCSSの方がいいですし、CSS3でも構いません。しかし、私は CSS3 に慣れていないので、誰かがそれを行う方法を提案してくれることを願っています。
http://dribbble.com/shots/1213195-CMS-Concept/attachments/162177からの抜粋
多くの優れたアプローチがあります。別のアプローチで、すべての 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 でもこれをレンダリングできると思いますが、チェックしていません)。
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);
}
各 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;
}
Js フィドルを確認する
cjross フィドルの修正
.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;
}
これは私の試みであり、境界線、変換、:afterおよび:before疑似要素のその他のもので遊んでいます。
もちろん、値を調整してピクセル パーフェクトな結果を得ることができます。しかし、形の下にある小さな境界線や影を再現することはできません... :/