CSS-перенос текста на изображениях [дубликаты]

См. Это для некоторых опций. У меня есть два варианта: CSS-Shapes и SVG.

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

Вот JSFIDDLE, так как вы можете видеть, что текст способен выделить и может быть отредактирован. (Больше боли, чтобы отредактировать, сделайте все возможное с текстом в AI перед сохранением, но он все равно может быть отредактирован)

Это также очень гибко, как вы можете видеть в этом FIDDLE.

Это очень новая функция и не имеет хорошей поддержки браузера.

SO CSS-Shapes

Как только это,

shape-outside: polygon(50px 0px, 100px 100px, 0px 100px);

поддерживается, вы сможете сделать это с легкостью.

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

Мне удалось разобраться с этим. Изображение остается в div и окружено двумя другими закрытыми тегами div.

<div id="navig">
    <div id="nav1"></div>
    <div id="nav2"><img src="images/logo.png" height="333" id="logo" /></div>
    <div id="nav3"></div>
</div>

Затем я #navig div {float:left;} что все три из этих float остались: #navig div {float:left;} а два пустых divs используют text-align. Первый будет выравниваться вправо, а последний - влево.

Затем два пустых divs заполняются с помощью <ul> и меню, которое я хотел, заполняется тегами <li>. Для примеров я использую некоторые основные пункты меню.

<div id="navig">
        <div id="nav1">
            <ul>
                <li>Home</li>
                <li>About</li>
                <li>Contact</li>
            </ul>
        </div>
        <div id="nav2">
            <img src="images/logo.png" height="333" />
        </div>
        <div id="nav3">
            <ul>
                <li>Products</li>
                <li>Shipping</li>
                <li>Legal</li>
            </ul>
        </div>
    </div>

Затем я добавил #nav1 ul li:nth-child(1) и позиционировал первый элемент, который был бы "домом" против алмаза. Я могу изменить "Домой" на все, что мне кажется, и позиция остается, поскольку она вынуждена text-align: right. Добавляя их с каким-либо количеством элементов <li> которые вы используете и редактируете в соответствии с вашими потребностями. Например:

#nav1 ul li:nth-child(1) {
    position: relative;
    left: 48px;
}

#nav1 ul li:nth-child(2) {
    position: relative;
    left: 24px;
}

#nav1 ul li:nth-child(3) {
    position: relative;
    left: 8px;
}

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

Немного продолжительный процесс, но много свободы и дал мне желаемый эффект!

Вы не можете сделать это только с изображением. Но вы можете использовать формы, проверьте эту страницу:

https://www.makeuseof.com/tag/csstextwrap/

Используя CSSTextWrapper, вы можете легко создавать HTML-текстовые обертки для любой мыслимой формы. Это могут быть круги, зигзаги, треугольники или что угодно. Быстрый и простой в использовании, просто загрузите логотип (необязательно) на предоставленную панель инструментов и перетащите боковые линии, чтобы задать перенос текста.

Довольно впечатляющий.