Вопрос по css-shapes, svg, css3, css – Треугольная форма с фоновым изображением

20

Я работаю над проектом, который требует, чтобы два треугольника содержали фоновые изображения и были ссылками.

Вот мой макет для того, как я хотел бы два треугольника.

Triangles with background images

В настоящее время у меня есть только два div, которые охватывают 900x600 с каждым треугольником в качестве фонового изображения. Проблема, с которой я сейчас сталкиваюсь, заключается в том, что я не могу навести курсор мыши на прозрачную часть раздела Cinema, чтобы добраться до раздела фотографии.

Могу ли я выполнить этот дизайн с помощью треугольников CSS3 и установить их фоновые изображения? Я всегда думал, что нестандартная форма состоит из рамки, цвета рамки.

Можно ли это сделать с треугольниками CSS3, и если да, может ли кто-нибудь помочь мне с кодом?

Вот что у меня сейчас есть.

.pageOption {
  position: relative;
  width: 900px;
  height: 600px;
}
.pageOption .photo {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 900px;
  height: 600px;
  background: url('../images/menuPhoto.png') no-repeat 0 0;
}
.pageOption .cinema {
  position: absolute;
  bottom: 0px;
  right: 0px;
  width: 900px;
  height: 600px;
  background: url('../images/menuCinema.png') no-repeat 0 0;
}
<div class="pageOption">
  <a href="#" class="option photo" id="weddingPhoto"></a>
  <a href="#" class="option cinema" id="weddingCinema"></a>
</div>

try csspointer-events свойство undefined

Ваш Ответ

4   ответа
3

С помощью Холст, который является тегом HTML5 и не является кросс-браузерным.С помощью SVG. (Самый надежный) С помощью CSS3 поверните переход и закройте его в оболочку со скрытым переполнением. Опять не кросс браузер.

Поворотный переход:

-webkit-transform: rotate(7.5deg);  /* Saf3.1+, Chrome 
   -moz-transform: rotate(7.5deg);  /* FF3.5+ 
    -ms-transform: rotate(7.5deg);  /* IE9 
     -o-transform: rotate(7.5deg);  /* Opera 10.5 
        transform: rotate(7.5deg);
           filter: progid:DXImageTransform.Microsoft.Matrix(/* IE6–IE9 
                   M11=0.9914448613738104, M12=-0.13052619222005157,M21=0.13052619222005157, M22=0.9914448613738104, sizingMethod='auto expand');
4

мер использованияinline svg и элемент пути-клипа:

<svg viewbox="0 0 10 6.7">
  <defs>
    <clipPath id="top">
      <polygon points="0 0, 9.9 0, 0 6.6" />
    </clipPath>
    <clipPath id="bottom">
      <polygon points="10 0.1, 10 6.7, 0.1 6.7" />
    </clipPath>
  </defs>
  <image xlink:href="http://i.imgur.com/RECDV24.jpg" x="0" y="0" height="6.7" width="10" clip-path="url(#top)"/>
  <image xlink:href="http://i.imgur.com/5NK0H1e.jpg" x="0" y="0" height="6.7" width="10" clip-path="url(#bottom)"/>
</svg>

38

если вы используете дочерние изображения для ссылок вместо фоновых изображений. Вам просто нужно наклонить два.option элементы с различным происхождением преобразования, затем отсеките их дочерние изображения и установитеoverflow: hidden на обоих.pageOption и.option элементы. Поддержка хорошая, должна работать на все, кроме IE8 / 7 и Opera Mini.

DEMO

Результа:

HTML:

<div class='pageOption'>
  <a href='#' class='option' data-inf='photo'>
    <img src='../images/menuPhoto.png'>
  </a>
  <a href='#' class='option' data-inf='cinema'>
    <img src='../images/menuCinema.png'>
  </a>
</div>

Соответствующие CSS:

.pageOption {
  overflow: hidden;
  position: relative;
  width: 40em; height: 27em;
}
.option, .option img { width: 100%; height: 100%; }
.option {
  overflow: hidden;
  position: absolute;  
  /* arctan(27 / 40) = 34.01935deg 
   * need to skew by 90deg - 34.01935deg = 55.98065deg
  */
  transform: skewX(-55.98deg);
}
.option:first-child {
  left: -.25em;
  transform-origin: 100% 0;
}
.option:last-child {
  right: -.25em;
  transform-origin: 0 100%;
}
.option img {
  transform: skewX(55.98deg);
  transform-origin: inherit;
}
Чтобы построить поверх ответа Аны, если ширина контейнера должна быть гибкой, вы можете рассчитать угол с помощью javascript для изменения размера окна, как указано в этом ответе: Stackoverflow.com / а / 14200600/848254 Zach Esposito
0

css3 сделаны из рамок, поэтому вы не можете прикрепить к ним фоны.

Я бы посоветовал вам просто использовать два PNG один за другим и использовать js для прослушивания события щелчка и создания правильного действия в зависимости от положения мыши.

Существует также свойство css webkit-mask, но оно очень не поддерживается в других браузерах (я использовал его для небольшого трюка с пейджингом -http: //jsfiddle.net/xTNTH/3 - лучше всего на сафари [нет JS только CSS] -http: //snag.gy/7fRNq.jp)

Похожие вопросы