С помощью CSS3 преобразования перекоса в одну сторону

Есть ли возможность создания "с помощью CSS3 преобразования скоса одной стороне"

Я нашел одно решение, но это's не полезно для меня, потому что мне нужно использовать изображения для фона (не цвет)

#skewOneSide {
    border-bottom: 40px solid #FF0000;
    border-left: 50px solid rgba(0, 0, 0, 0);
    height: 0;
    line-height: 40px;
    width: 100px;
}

Даже этот [JsFiddle](http://jsfiddle.net/Hfkk7/4/) не является полезным, а также (перекос зона должна быть прозрачной)

Hakan Fıstık
Редактировал вопрос 4-го апреля 2017 в 12:03
Программирование
html5 css3 css css-shapes
4-го ноября 2013 в 3:28
40 просмотров
Комментарии к вопросу (2)
Решение

Попробуйте этот:

В unskew изображение использовать вложенные div для изображения и придать ему противоположное значение перекоса. Так что если у вас 20 градусов на родителя, то вы можете дать вложенной (изображение) див значение наклона -20 градусов.

в 

.container {
  overflow: hidden;
}

#parallelogram {
  width: 150px;
  height: 100px;
  margin: 0 0 0 -20px;
  -webkit-transform: skew(20deg);
  -moz-transform: skew(20deg);
  -o-transform: skew(20deg);
  background: red;
  overflow: hidden;
  position: relative;
}

.image {
  background: url(http://placekitten.com/301/301);
  position: absolute;
  top: -30px;
  left: -30px;
  right: -30px;
  bottom: -30px;
  -webkit-transform: skew(-20deg);
  -moz-transform: skew(-20deg);
  -o-transform: skew(-20deg);
}
<div class="container">
  <div id="parallelogram">
    <div class="image"></div>
  </div>
</div>

в

Пример:

http://jsfiddle.net/diegoh/mXLgF/1154/

Roko C. Buljan
Редактировал ответ 6-го апреля 2017 в 1:15
Комментарии (1)

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

http://jsfiddle.net/zwXaf/2/

В формате HTML

<ul>
    <li><a href="#">One</a></li>
    <li><a href="#">Two</a></li>
    <li><a href="#">Three</a></li>
</ul>

УСБ

/* reset */
ul, li, a {
    margin: 0; padding: 0;
}
/* nav stuff */
ul, li, a {
    display: inline-block;
    text-align: center;
}
/* appearance styling */
ul {
    /* hacks to make one side slant only */
    overflow: hidden;
    background: linear-gradient(to right, red, white, white, red);
}
li {
    background-color: red;
     transform:skewX(-20deg);
    -ms-transform:skewX(-20deg);
    -webkit-transform:skewX(-20deg);
}
li a {
    padding: 3px 6px 3px 6px;
    color: #ffffff;
    text-decoration: none;
    width: 80px;
     transform:skewX(20deg);
    -ms-transform:skewX(20deg);
    -webkit-transform:skewX(20deg);
}
Комментарии (0)

вы можете сделать это с помощью трансформации и преобразования корни.

Комбинируя различные transfroms дает аналогичный результат. Я надеюсь, что вы найдете его полезным. :) Увидеть эти примеры для более простых преобразований. это оставило точки :

в 

div {    
    width: 300px;
    height:200px;
    background-image: url('http://placecage.com/g/300/200');
    -webkit-transform: perspective(300px) rotateX(-30deg);
    -o-transform: perspective(300px) rotateX(-30deg);
    -moz-transform: perspective(300px) rotateX(-30deg);
    -webkit-transform-origin: 100% 50%;
    -moz-transform-origin: 100% 50%;
    -o-transform-origin: 100% 50%;
    transform-origin: 100% 50%;
    margin: 10px 90px;
}
<div></div>

в

Это правильная точка наклона :

в 

div {    
    width: 300px;
    height:200px;
    background-image: url('http://placecage.com/g/300/200');
    -webkit-transform: perspective(300px) rotateX(-30deg);
    -o-transform: perspective(300px) rotateX(-30deg);
    -moz-transform: perspective(300px) rotateX(-30deg);
    -webkit-transform-origin: 0% 50%;
    -moz-transform-origin: 0% 50%;
    -o-transform-origin: 0% 50%;
    transform-origin: 0% 50%;
    margin: 10px 90px;
}
<div></div>

в

что преобразуются: 0% 50%;` делает это устанавливает происхождение вертикальные средние и горизонтальный слева от элемента. таким образом, перспектива не видна в левой части снимка, так это выглядит плоско. Эффект перспективы есть в правой части, так это выглядит раскосые.

Max Payne
Редактировал ответ 26-го марта 2015 в 7:42
Комментарии (1)

Вы попробуйте С :до был довольно близко, единственное, что вам пришлось изменить было на самом деле с помощью косых вместо границ: http://jsfiddle.net/Hfkk7/1101/

Редактировать: ваш пограничный подход тоже будет работать, единственное, что ты сделал не так, имея перед элементом на верхней части элемента div, так что прозрачные границы не показывает. Если бы позиция псевдо элемент слева от ваших дел, все бы сработало: http://jsfiddle.net/Hfkk7/1102/

Комментарии (1)

Может быть, вы хотите использовать CSS и Медведь клип-путь; (работает с прозрачностью и фоном)

назальный клип-путь; ссылка: https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path

Генератор: http://bennettfeely.com/clippy/

Пример:

в 

/* With percent */
.element-percent {
  background: red;
  width: 150px;
  height: 48px;
  display: inline-block;

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

/* With pixel */
.element-pixel {
  background: blue;
  width: 150px;
  height: 48px;
  display: inline-block;

  clip-path: polygon(0 0, 100% 0%, calc(100% - 32px) 100%, 0% 100%);
}

/* With background */
.element-background {
  background: url(https://images.pexels.com/photos/170811/pexels-photo-170811.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260) no-repeat center/cover;
  width: 150px;
  height: 48px;
  display: inline-block;

  clip-path: polygon(0 0, 100% 0%, calc(100% - 32px) 100%, 0% 100%);
}
<div class="element-percent"></div>

<br />

<div class="element-pixel"></div>

<br />

<div class="element-background"></div>

в

OzgurG
Редактировал ответ 29-го сентября 2019 в 2:37
Комментарии (0)