これに似たレスポンシブ ボーダーを作成することは可能ですか?
http://tinypic.com/view.php?pic=qyzrys&s=5
私は境界線画像技術を試しましたが、これは境界線がdivの内側に配置されているため、pngを白で塗りつぶします。また、基になるdivに水平にdivを配置しようとしましたが、% + padding/marginsで正確な幅を知ることは困難です.
これを達成するための助け/アイデアをいただければ幸いです。
4230 次
3 に答える
0
グラデーションの代わりに半透明の背景を持つpng画像のボーダー画像を使用できます。 http://codepen.io/anon/pen/iFJpH
html {background:lightgray;}
div {margin:5em;min-height:5em;background:white;border-style: solid;
border-width: 40px 10px 0px;
-moz-border-image: url(http://oi44.tinypic.com/qyzrys.jpg) 34 18 1 29 repeat;
-webkit-border-image: url(http://oi44.tinypic.com/qyzrys.jpg) 34 18 1 29 repeat;
-o-border-image: url(http://oi44.tinypic.com/qyzrys.jpg) 34 18 1 29 repeat;
border-image: url(http://oi44.tinypic.com/qyzrys.jpg) 34 18 1 29 repeat;
オンラインツールでも : http://border-image.com/
レスポンシブ？それを調整するために最後に行う
ことは、メディアクエリを介して異なる最大幅を設定することです
。これにより、ウィンドウが幅を縮小したときに三角形がスライスされなくなります。境界線サイズを設定して、三角形を拡大または縮小することもできます。彼らはストレッチします
于 2013-06-20T23:01:28.050 に答える