Вопросы Теги

CSS3 Преобразование перекоса в одну сторону

Исключение нулевого указателя - это индикатор того, что вы используете объект, не инициализируя его.

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

public class Student {

    private int id;

    public int getId() {
        return this.id;
    }

    public setId(int newId) {
        this.id = newId;
    }
}

Приведенный ниже код дает вам исключение с нулевым указателем. 

public class School {

    Student obj_Student;

    public School() {
        try {
            obj_Student.getId();
        }
        catch(Exception e) {
            System.out.println("Null Pointer ");
        }
    }
}

Поскольку вы используете Obj_Student, но вы забыли инициализировать его, как в правильном коде, показанном ниже: 

public class School {

    Student obj_Student;

    public School() {
        try {
            obj_Student = new Student();
            obj_Student.setId(12);
            obj_Student.getId();
        }
        catch(Exception e) {
            System.out.println("Null Pointer ");
        }
    }
}
25
задан Hakam Fostok 4 April 2017 в 12:03
поделиться

5 ответов

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

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

.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 /

22
ответ дан Roko C. Buljan 4 April 2017 в 12:03
поделиться

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

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>

CSS 

/* 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);
}
13
ответ дан Jake 4 April 2017 в 12:03
поделиться

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

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

6
ответ дан darthmaim 4 April 2017 в 12:03
поделиться

Вы можете сделать это используя transform и transform origin.

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

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>

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

9
ответ дан Max Payne 4 April 2017 в 12:03
поделиться

Может быть, вы хотите использовать CSS «clip-path» (работает с прозрачностью и фоном)

ссылка «clip-path»: 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>
1
ответ дан OzgurG 4 April 2017 в 12:03
поделиться
Другие вопросы по тегам:

Похожие вопросы: