Диагональная граница div css с фоновым изображением

Я пытаюсь получить 2 div рядом друг с другом с диагональным пространством между ними. Я видел несколько руководств в stackoverflow о диагональных div, но все они делают это, используя 2 границы для div со сплошным цветом и используя диагональную линию, которую они создают. Но я хочу иметь картинки/фоновое изображение вместо сплошного цвета. И, возможно, даже другой контент, например текст, расположенный под диагональной линией. И это невозможно при использовании границ, так как граница находится за пределами div. (плавающее право со скрытым переполнением или что-то для содержимого.)

Может ли кто-нибудь здесь дать мне подсказку, как этого добиться? Все мои тесты закончились ничем и близко не похожим на то, что я хочу. Что-то вроде этого:

введите здесь описание изображения

Большое спасибо, если кто-нибудь может указать на это для меня.


html css diagonal
person Tomcent    schedule 23.12.2013    source источник
comment
Вероятно, вам следует опубликовать код, который вы пробовали до сих пор, и/или создать jsFiddle, демонстрирующий этот код, в противном случае это, вероятно, чтобы закрыться.   -  person Code Maverick    schedule 23.12.2013
comment
Хм, сложно. Я думаю, возможно, вы могли бы сделать что-то с преобразованиями CSS, но 2D-преобразования не будут делать трапециевидные формы, как вы хотите здесь.   -  person user1618143    schedule 23.12.2013
comment
Я сделаю jsFiddle и опубликую его здесь, где-то 2morow или позже на этой неделе. Сейчас Рождество ;)   -  person Tomcent    schedule 24.12.2013

Ответы (1)


arrow_upward
-1
arrow_downward

добавить следующий стиль ко второму изображению

<style>
    .img2{
    margin-right:-10px;
    }
    <style>

person Vinay Chandra    schedule 13.10.2016