Переместить верхний угол среза вниз, используя линейный градиент - PullRequest
Новая
       0

Переместить верхний угол среза вниз, используя линейный градиент

0 голосов
/ 20 февраля 2020

Доброе утро,

Мне нужна помощь с приложенным ниже изображением:

Угол среза

Используя линейный градиент, как мне переместить верх обрежьте угол до нижнего угла и сделайте верхний угол квадратным / острым, как и другие углы. Пожалуйста, смотрите текущие css ниже: 

body.page {
  background: url(../img/Login-bg.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  -o-background-size: cover;
  font-size: 14px;
  align-items: center;
  padding-top: 50px;
  padding-bottom: 50px;
}

.cut-corner {
  position: relative;
  color: #4a4a4c;
  background-repeat: no-repeat;
  background-image: linear-gradient(#bcd431, #bcd431), linear-gradient(#bcd431, #bcd431), linear-gradient(#bcd431, #bcd431), linear-gradient(#bcd431, #bcd431),
    linear-gradient(to bottom left, transparent calc(50% - 0.5px), #bcd431 calc(50% - 0.5px), #bcd431 calc(50% + 0.5px), transparent calc(50% + 0.5px)), linear-gradient(transparent, transparent), linear-gradient(transparent, transparent);
  background-size: 1.5px 100%, 1.5px 100%, 100% 1.5px, 100% 1.5px, 65px 65px, 100% 100%, 100% 100%;
  background-position: 0% 0%, 100% 65px, -65px 0%, 0px 100%, 100% 0%, -65px 0%, 100% 65px;
  margin: 25px;
}

.cut-corner:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  top: 0;
  z-index: -1;
  opacity: 100%;
  background-repeat: no-repeat;
  background-image: linear-gradient(#bcd431, #bcd431), linear-gradient(#bcd431, #bcd431), linear-gradient(#bcd431, #bcd431), linear-gradient(#bcd431, #bcd431),
    linear-gradient(to bottom left, transparent calc(50% - 0.5px), #bcd431 calc(50% - 0.5px), #bcd431 calc(50% + 0.5px), transparent calc(50% + 0.5px)), linear-gradient(transparent, transparent), linear-gradient(transparent, transparent);
  background-size: 0.5px 100%, 1.5px 100%, 100% 0.5px, 100% 1.5px, 65px 65px, 100% 100%, 100% 100%;
  background-position: 0% 0%, 100% 65px, -65px 0%, 0px 100%, 100% 0%, -65px 0%, 100% 65px;
}

HTML: 

<body class="page cut-corner">
...
</body>

Любая помощь будет принята с благодарностью.

Ответы [ 2 ]

0 голосов
/ 20 февраля 2020

Вы управляете разрезом в части background-position следующим образом 

background-position: 0% 0%, 100% -65px, 0px 0%, -65px 100%, 100% 100%, -65px 50%, 100% 65px;

Как видно из каждой комы, определены два значения, из которых первое определяет положение каждой границы (верх border, bottom border ...) и другое значение определяет длину границы, попробуйте поиграть со значениями, и вы сможете сделать верхнюю границу полной длины, нижнюю границу немного короче, немного переместить правую границу выше и переместите диагональную линию вниз, затем просто измените это значение с bottom left на bottom right, чтобы изменить угол маленькой диагональной линии следующим образом: 

background-image: linear-gradient(#bcd431, #bcd431), linear-gradient(#bcd431, #bcd431), linear-gradient(#bcd431, #bcd431), linear-gradient(#bcd431, #bcd431),
linear-gradient(to bottom right, transparent calc(50% - 0.5px), #bcd431 calc(50% - 0.5px), #bcd431 calc(50% + 0.5px), transparent calc(50% + 0.5px)), linear-gradient(transparent, transparent), linear-gradient(transparent, transparent);

Если вы этого не сделаете позаботьтесь о его понимании и просто хотите применить код, здесь вы go весь код уже изменен (единственные сделанные изменения в cut-corner:after) 

.cut-corner:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  top: 0;
  z-index: -1;
  opacity: 100%;
  background-repeat: no-repeat;
  background-image: linear-gradient(#bcd431, #bcd431), linear-gradient(#bcd431, #bcd431), linear-gradient(#bcd431, #bcd431), linear-gradient(#bcd431, #bcd431),
    linear-gradient(to bottom right, transparent calc(50% - 0.5px), #bcd431 calc(50% - 0.5px), #bcd431 calc(50% + 0.5px), transparent calc(50% + 0.5px)), linear-gradient(transparent, transparent), linear-gradient(transparent, transparent);
  background-size: 1px 100%, 1.5px 100%, 100% 1px, 100% 1.5px, 65px 65px, 100% 100%, 100% 100%;
  background-position: 0% 0%, 100% -65px, 0px 0%, -65px 100%, 100% 100%, -65px 50%, 100% 65px;
}
0 голосов
/ 20 февраля 2020

Вы можете попробовать, как показано ниже, комбинацию градиента и clip-path, с которой легче работать 

.box {
  margin:10px;
  height:200px;
  border: 2px solid red;
  background:
    linear-gradient(to bottom right,transparent 50%,red 50.5%) 
    bottom right/50px 50px no-repeat;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 50px),calc(100% - 50px) 100%, 0 100%); 
}

body {
  background:yellow;
}
<div class="box"></div>

С переменной CSS для легкой регулировки угла: 

.box {
  --c:50px;
  
  margin:10px;
  height:200px;
  border: 2px solid red;
  background:
    linear-gradient(to bottom right,transparent 50%,red 50.5%) 
    bottom right/var(--c) var(--c) no-repeat;
  clip-path:polygon(0 0,100% 0,100% calc(100% - var(--c)),calc(100% - var(--c)) 100%, 0 100%); 
}

body {
  background:yellow;
}
<div class="box"></div>

<div class="box" style="--c:100px;"></div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...