3

HTML と CSS を使用して、次のようにクリップおよびマスクされた画像を含む div を作成するにはどうすればよいですか。

同様に変換された画像を含む遠近法で歪んだ div

私はこれを約2時間行う方法を見つけようとしてきましたが、どこにも行かなかったので、誰かが私を正しい方向に向けることができることを望んでいました. ここで具体的に言うと、上の 2 つの角が丸くなるように画像をクリップし、4 つの角が丸く、下に 1/4 のパディングがある div 要素に埋め込み、両方の要素が右端に見えるように変換します。左より視聴者から離れています。

4

2 に答える 2

9

このような効果を作成するには、イメージは同じままですが、外側の形状がこの遠近感のある外観になるようにするには、以下のデモに似たものを使用できます。

div.inner {/*gives top section effect, also crops the image*/
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 20px 20px 0 0;
  height: 200px;
  width: 300px;
  overflow: hidden;
  border: 10px solid red;
  transform: skewY(5deg);
}

.inner img {/*removes transform skew from image*/
  transform: skewY(-5deg);
  transform-origin: top left;
  height:100%;width:100%;
}

.wrap {
  display: inline-block;
  height: 200px;
  width: 300px;
  position: relative;
  
  /*for demo only*/
  margin: 100px 100px;
}

.wrap:after { /*give bottom section the effect*/
  content: "";
  position: absolute;
  bottom: -50%;
  left: 0;
  height: 100%;
  width: calc(100% + 20px);
  transform: skewY(-10deg);
  transform-origin: bottom right;
  background: red;
  z-index: -1;
  border-radius: 20px;
}
<div class="wrap">
  <div class="inner">
    <img src="http://lorempixel.com/500/500" />
  </div>
</div>

効果を作成するために、このwrapperdiv を組み込む必要がありました。これにより、疑似要素 ( :aftercss) を使用して形状の下部を生成できます。

 +----------------------------+
 |                            |
 |                    _______/  <-- curved corner
 |             ------/
 |      ------/
 \-----/
   /\
    \_____ also curved corner

したがって、innerdiv は形状の上部を生成するために使用されます。skew宣言を使用すると、形状は:after要素の反対を可能にし、赤い形状の右側を下方に移動します。

これにより、このdivoverflow:hidden内に収まらない画像の部分がトリミングされます (上隅のみが影響を受けることが保証されます)。innerborder-radius:20px 20px 0 0;

注意すべき最後のポイントは.inner imgcssです。divを歪めた.innerので、画像を「歪ませる」ことが重要であり、長方形の形状のままになります。これが、ここに「カウンター スキュー」がある理由です ( transform: skewY(-5deg);)。

于 2016-01-25T16:20:19.413 に答える