Обрезанное угловое деление с отдельным линейным градиентом - PullRequest
Новая
       19

Обрезанное угловое деление с отдельным линейным градиентом

0 голосов
/ 18 сентября 2018

Вместо того, чтобы возвращаться к SVG, я бы хотел сделать это с помощью чистого CSS.

Существует ряд учебных пособий по обрезанным краям с использованием серии линейных градиентов, т.е. 

background: linear-gradient(135deg, transparent 15px, blue 0) top left,
            linear-gradient(-135deg, transparent 15px, blue 0) top right,
            linear-gradient(-45deg, transparent 15px, blue 0) bottom right,
            linear-gradient(45deg, transparent 15px, blue0) bottom left;
background-size: 50% 50%;
background-repeat: no-repeat;

И диагональный «линейный градиент» также может быть выполнен довольно легко, то есть 

background: linear-gradient(290deg, blue 50%, darkblue 50%);

Есть ли способ объединить эти два метода, чтобы получить что-то вроде коробки, изображенной ниже?

enter image description here

Редактировать: совместимость Internet Explorer была бы отличной. 

-webkit-clip-path
clip-path

Не совместимы с IE, насколько мне известно.

Ответы [ 2 ]

0 голосов
/ 19 сентября 2018

Ответ Серга был полезен в решении проблемы, но я подумал, что опубликую полное решение. 

background: linear-gradient(290deg, blue 50%, darkblue 50%);
-webkit-clip-path: polygon(5% 0, 95% 0, 100% 10%, 100% 90%, 95% 100%, 5% 100%, 0 90%, 0 10%);
clip-path: polygon(5% 0, 95% 0, 100% 10%, 100% 90%, 95% 100%, 5% 100%, 0 90%, 0 10%);

Примечание, что это не будет работать вообще в IE, и вы должны продолжитьВариант SVG в этом случае.

Редактировать: потратив немного больше времени на это, нет причин, по которым вы не могли бы создать псевдоэлементы до и после вашего div, который содержит linear-gradient для добавления края обрезки.'посмотрите.

См. кодовый код здесь или CSS ниже. 

/*div and interior BG*/
div {
  width: 80%;
  height: 300px; /*Make sure your content has a height specified*/
  display: inline-block;
  background: linear-gradient(290deg, blue 50%, darkblue 50%);
  position: relative;
  margin-left: 10%;
}

/*Shared styles across pseudo elements*/
div:before, div:after {
  content: '';
  width: 20%;
  min-height: 300px; /*Fits psuedo element height to content*/
  position: absolute;
  display:inline-block;
}
/*Position and cuts for left side*/
div:before {
  left: -9.9%;
  background: linear-gradient(135deg, transparent 15px, darkblue 0) top left,
            linear-gradient(45deg, transparent 15px, darkblue 0) bottom left;
  background-size: 100% 51%;
  background-repeat: no-repeat;
}
/*Position and cuts for left right*/
div:after {
  right: -9.9%;
  background:
            linear-gradient(-135deg, transparent 15px, blue 0) top right,
            linear-gradient(-45deg, transparent 15px, blue 0) bottom right;
  background-size: 100% 51%;
  background-repeat: no-repeat;
}
0 голосов
/ 18 сентября 2018

Вы можете определить один прозрачный угол через градиент фона.Однако, когда вы объявляете более одного, они закрашивают прозрачность, определенную предыдущим правилом.По сути, они закрашивают друг друга.

Лучшее решение - использовать clip-path.Для простых фигур вы можете использовать clippy . 

body {
  background: black;
}

#gradients {
  width: 200px;
  height: 50px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0) 15px, rgba(255, 0, 0, 1) 0) top left, linear-gradient(-135deg, rgba(255, 255, 255, 0) 15px, rgba(255, 0, 0, 1) 0) top right, linear-gradient(-45deg, rgba(255, 255, 255, 0) 15px, rgba(255, 0, 0, 1) 0) bottom right, linear-gradient(45deg, rgba(255, 255, 255, 0) 15px, blue) bottom left;
}

#gradientsPaintover {
  margin: 30px 0 0 0;
  width: 200px;
  height: 50px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0) 15px, rgba(0, 255, 0, 0.4) 0) top left, linear-gradient(-135deg, rgba(255, 255, 255, 0) 15px, rgba(0, 0, 255, 1) 0) top right;
}


#clip {
  background: red;
  margin: 30px 0 0 0;
  width: 200px;
  height: 50px;
  -webkit-clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%);
  clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%);
}
<div id="gradients"></div>
<div id="gradientsPaintover"></div>
<div id="clip"></div>
...