Непрямоугольные изображения - PullRequest
0 голосов
/ 25 августа 2011

Есть ли способ разместить изображение с непрямоугольной областью на странице? Например, изображение имеет такую ​​форму:

   ____
  |    |
  |    |  Place links, etc. here
  |    |_________________________
  |                              |
  |______________________________|

Я понимаю, что можно использовать абсолютное позиционирование и просто поместить текст поверх пробела на изображении, но я бы предпочел избежать этого решения.

Ответы [ 2 ]

1 голос
/ 25 августа 2011

Если это в HTML, то я не верю, что это возможно, кроме как использовать решение, которое вы уже предложили. Или вырезайте свое изображение и используйте это решение: http://meyerweb.com/eric/css/edge/raggedfloat/demo.html

1 голос
/ 25 августа 2011

Создайте изображение прямоугольным, как обычно, с размерами, заданными для охвата области, в которой вы хотите, чтобы ваши ссылки / текст / что-либо появлялись, и просто сделайте ссылку / текст / любую область прозрачной (или того же цвета, что и фон) , а затем создайте div, например, так:

  <div style="background: url('yourimage.png') no-repeat;  padding-left: 150px; padding-top: 50px;">Links and text go here</div>

(при условии, что ваша область для текста / что-либо составляет 150 пикселей слева, 50 пикселей сверху изображения)

...