0

だから私はCSS（のみ）で歪んだ分離を作ろうとしていました. ここでは次のようになります: http://i.stack.imgur.com/hVCa1.png

すでに CSS 変換で試しましたが ( transform: skew(-15deg);)、すべてのブラウザーで機能するとは思いませんし、実際には適応性がありません。線形グラデーションで作ろうと思ったのですが、これが良いかどうかはわかりません。

これに対するより良い解決策を知っていますか？

編集：ここにコードがあります：

.results {
  width: 500px; }

.transf {
  height: 30px;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  /* Firefox */
  display: inline-block;
  -moz-transform: skew(-15deg);
  -webkit-transform: skew(-15deg);
  -o-transform: skew(-15deg);
  -ms-transform: skew(-15deg);
  transform: skew(-15deg);
  background: grey !important;
  width: 6px;
  margin-left: -4px;
  margin-right: -5px;
  z-index: 1; }

.left_border {
  height: 30px;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  /* Firefox */
  display: inline-block;
  -moz-transform: skew(-15deg);
  -webkit-transform: skew(-15deg);
  -o-transform: skew(-15deg);
  -ms-transform: skew(-15deg);
  transform: skew(-15deg);
  background: yellow;
  border-right: 1px solid green;
  border-top: 1px solid green;
  border-bottom: 1px solid green;
  width: 10px;
  margin-left: -15px;
  z-index: 2; }

.right_border {
  height: 30px;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  /* Firefox */
  display: inline-block;
  -moz-transform: skew(-15deg);
  -webkit-transform: skew(-15deg);
  -o-transform: skew(-15deg);
  -ms-transform: skew(-15deg);
  transform: skew(-15deg);
  background: orange;
  border-left: 1px solid red;
  border-top: 1px solid red;
  border-bottom: 1px solid red;
  width: 10px;
  margin-right: -20px;
  z-index: 2; }

.left {
  height: 30px;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  /* Firefox */
  display: inline-block;
  background: yellow;
  width: 30%;
  border: 1px solid green;
  z-index: 0; }

.right {
  height: 30px;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  /* Firefox */
  display: inline-block;
  background: orange;
  width: 20%;
  border: 1px solid red;
  z-index: 0; }

.item21 {
  width: 5%; }

.item22 {
  width: 15%; }

そしてHTML：

<div class="results">
    <div class="left"></div>
    <div class="left_border"></div>
    <div class="transf"></div>
    <div class="right_border"></div>
    <div class="right"></div>
</div>
<div class="results">
    <div class="left item21"></div>
    <div class="left_border"></div>
    <div class="transf"></div>
    <div class="right_border"></div>
    <div class="right item22"></div>
</div>
4

2 に答える 2

0

できることがいくつかあります。

  • CSSSandpaper のようなポリフィルで変換を使用して、ブラウザ間の互換性を持たせることができます。ただし、そのタイプの分離 (div の片側をまっすぐにする) を取得するには、skew AND perspectiveを使用する必要がある場合があります。

  • CSS トライアングル トリックで before 疑似クラスと after 疑似クラスを使用することで、フェイク セパレーターを作成できます。これも、 Selectivizrのような疑似クラスのポリフィルが必要になります。また、border-width探しているものと一致するように値をいじる必要があります。

  • before/after 疑似クラスを使用して PNG を使用できます。

  • SVGを使用して、コンテナーの周囲に境界線を描画できます。

これらはどれでも機能しますが、角を丸くしたり影を落としたりするほど簡単ではありません。これらのタイプの結果を得るには、少し余分な作業を行う必要があります。

于 2013-08-21T18:54:43.717 に答える
0

ご指摘のとおり、これは CSS3 でのみ実行できますが、すべてのブラウザーがサポートしているわけではありません。ブラウザーを完全にサポートするには、jQuery を使用します

デモhttp://jsfiddle.net/kevinPHPkevin/UkAfD/26/

var skewed = false;
function skew() {
    skewed = !skewed;        
    $('#box').css({
        skewY: skewed ? '10deg' : '-10deg'
    });
}
于 2013-08-21T18:49:29.493 に答える