36

「CSS3 Transform Skew One Side」を作成することはできますか？

私は1つの解決策を見つけましたが、背景（色ではない）に画像を使用する必要があるため、役に立ちません

#skewOneSide {
    border-bottom: 40px solid #FF0000;
    border-left: 50px solid rgba(0, 0, 0, 0);
    height: 0;
    line-height: 40px;
    width: 100px;
}

このJsFiddleでも役に立ちません (歪んだ領域は透明にする必要があります)。

4

5 に答える 5

34

これを試して：

画像の傾きを補正するには、画像にネストされた div を使用し、反対の傾き値を指定します。したがって、親に 20 度がある場合は、ネストされた (画像) div に -20 度の傾斜値を与えることができます。

.container {
  overflow: hidden;
}

#parallelogram {
  width: 150px;
  height: 100px;
  margin: 0 0 0 -20px;
  -webkit-transform: skew(20deg);
  -moz-transform: skew(20deg);
  -o-transform: skew(20deg);
  background: red;
  overflow: hidden;
  position: relative;
}

.image {
  background: url(http://placekitten.com/301/301);
  position: absolute;
  top: -30px;
  left: -30px;
  right: -30px;
  bottom: -30px;
  -webkit-transform: skew(-20deg);
  -moz-transform: skew(-20deg);
  -o-transform: skew(-20deg);
}
<div class="container">
  <div id="parallelogram">
    <div class="image"></div>
  </div>
</div>

例：

http://jsfiddle.net/diegoh/mXLgF/1154/

于 2013-12-11T12:21:42.347 に答える
14

これが古いことは承知していますが、マージンオフセットの代わりに線形グラデーションを使用して同じ効果を達成することをお勧めします。これにより、すべてのコンテンツが元の場所に維持されます。

http://jsfiddle.net/zwXaf/2/

HTML

<ul>
    <li><a href="#">One</a></li>
    <li><a href="#">Two</a></li>
    <li><a href="#">Three</a></li>
</ul>

CSS

/* reset */
ul, li, a {
    margin: 0; padding: 0;
}
/* nav stuff */
ul, li, a {
    display: inline-block;
    text-align: center;
}
/* appearance styling */
ul {
    /* hacks to make one side slant only */
    overflow: hidden;
    background: linear-gradient(to right, red, white, white, red);
}
li {
    background-color: red;
     transform:skewX(-20deg);
    -ms-transform:skewX(-20deg);
    -webkit-transform:skewX(-20deg);
}
li a {
    padding: 3px 6px 3px 6px;
    color: #ffffff;
    text-decoration: none;
    width: 80px;
     transform:skewX(20deg);
    -ms-transform:skewX(20deg);
    -webkit-transform:skewX(20deg);
}
于 2014-07-11T06:28:05.213 に答える
9

:beforeかなり近いものを試してみましたが、変更する必要があったのは、実際には境界線の代わりにスキューを使用することだけでした: http://jsfiddle.net/Hfkk7/1101/

編集:境界線のアプローチも機能します。あなたが間違っていたのは、divの上にbefore要素があることだけだったので、透明な境界線は表示されませんでした。疑似要素を div の左側に配置すると、すべてがうまくいきます: http://jsfiddle.net/Hfkk7/1102/

于 2013-11-04T03:35:09.923 に答える