Можете ли вы дать изображение под углом?

Question

Я пытаюсь создать эффект панели комиксов, где края расположены под углом. Я представил пример того, что я пытаюсь получить. Это можно сделать с помощью css?

Answer 1

Да, это можно сделать в CSS, используя clip-path свойства.

С значением polygon() вы можете достичь практически любой желаемой формы. Он используется как это:

clip-path: polygon(a, b, c, [...]) 

Каждая буква в приведенном выше примере представляет координата точки в пути, и каждая точка имеет X и значение Y, начиная с верхнего левого.

Например, это:

clip-path: polygon(50% 0%, 0% 100%, 100% 100%); 

... означает, что первая точка будет на 50% X и 0%, так что сверху по центру. Вторая точка (0% 100%) будет равна 0% X и 100% Y, поэтому внизу слева. Последняя точка (100% 100%) будет равна 100% Х и 100% Y, поэтому внизу справа. Это создаст форму треугольника.

Clippy хороший инструмент, который будет генерировать clip-path для вас, вы можете перетаскивать точки, где вы хотите их и просто скопировать clip-path он генерирует для вас.

Для этого необходимо учитывать совместимость с браузером is not very good.

Answer 2

Это может быть сделано с помощью CSS-обрезки, но совместимость с браузером может быть проблемой для вас, см. Ссылку ниже для деталей.

https://www.viget.com/articles/angled-edges-with-css-masks-and-transforms

Answer 3

Вы можете сделать это с SVG

.element { 
 
    text-align: center; 
 
} 
 
svg { 
 
    width: 40vw; 
 
    overflow: visible; 
 
} 
 
.st0 { 
 
    fill: #FFFFFF; 
 
    stroke: #000000; 
 
    stroke-miterlimit: 10; 
 
} 
 
.st1 { 
 
    fill: white; 
 
    stroke: #000000; 
 
    stroke-miterlimit: 10; 
 
} 
 
polygon { 
 
    transition: all 0.3s ease-in; 
 
    transform-origin: center; 
 
} 
 
polygon:hover { 
 
    transform: scale(1.1); 
 
}

<div class="element"> 
 
    <svg viewBox="0 0 250 400" style="enable-background:new 0 0 250 400;"> 
 
    <polygon class="st0" points="12.111,175.777 12.111,9.111 239.889,9.111 239.889,80.222 " /> 
 
    <polygon class="st0" points="239.889,257.444 239.889,86.889 12.111,182.444 12.111,217.444 " /> 
 
    <polygon class="st1" points="106.84,241.17 106.84,393.56 12.11,393.56 12.11,225.22 " /> 
 
    <polygon class="st1" points="239.89,263.56 239.89,393.56 118.05,393.56 118.05,243.05 " /> 
 
    </svg> 
 
</div>