3

このように、マストヘッド画像の下部に矢印を付ける方法を見つけようとしています。CSS3 で矢印を作成する方法についていくつかの方法を見てきましたが、ほとんどの場合、border プロパティを使用してそれを実現していることがわかりました。通常、次のようなものです。

#demo {
   width: 100px;
   height: 100px;
   background-color: #ccc;
   position: relative;
   border: 4px solid #333;
 }

#demo:after {
   border-width: 9px;
   border-left-color: #ccc;
   top: 15px;
 }

メインアート以外の画像なしで、そのようなマスク形状を作成する方法を見つけようとしています. 誰かがこれを達成しましたか？誰かに何かアイデアがあれば、それは大歓迎です。

4

1 に答える 1

8

画像に合わせてサイズが変更される矢印を探しているなら、はい、できます。

デモ

HTML :

<div class='head'></div>
<div class='arrow'></div>

CSS :

.head {
  margin: 0 auto;
  width: 0; height: 0;
  /* take into account ratio of the image but with 20% less for the height */
  padding: 12.5% 30%;
  background: url(background.jpg);
  background-size: cover;
}
.arrow {
  overflow: hidden;
  position: relative;
  margin: -4.9% auto;
  padding: 4.42%; /* 25% of head's padding * sqrt(2) */
  width: 0;
  transform: rotate(45deg);
  background: red;
}
.arrow:after {
  position: absolute;
  bottom: 50%; left: 50%;
  margin: -70.71%; /* half of the width or height */
  width: 141.42%; height: 141.42%; /* sqrt(2)*141.42% */
  transform: rotate(-45deg);
  background: url(background.jpg) 50% 100%;
  background-size: 480% 250%; /* take into account ratio of the image */
  content: '';
}
于 2013-03-03T22:38:26.223 に答える