Вставьте кривую в середине деления - PullRequest
Новая
       31

Вставьте кривую в середине деления

3 голосов
/ 17 мая 2019

Я пытаюсь вставить кривую в середине div, чтобы я мог достичь этого результата:

Start at the bottom and go to top with a curve

Это то, что ясделал до сих пор. 

.back{
  background-color: grey;
  width: 100%;
  height: 200px;
  display: inline-grid;
  align-items: center;
  overflow: hidden;
}

.line{
  height: 3px;
  background: linear-gradient(to right, yellow, purple, blue, green, red, orange);
  transform: rotate(-10deg);
}
<div class="back">
  <div class="line"></div>
</div>

1 Ответ

7 голосов
/ 17 мая 2019

Без градиента и с прозрачностью вы можете рассмотреть псевдоэлемент и border-radius.Каждый псевдоэлемент создаст половину кривой, и вы присоединитесь к ним, чтобы создать иллюзию непрерывной кривой. 

.box {
  height:150px;
  margin:10px 0;
  position:relative;
  overflow:hidden;
  z-index:0;
  --l:3px;  /* Thickness of the curve */
  --r:90px; /* The curve radius */
  --w:60%;  /* The width of the left part (i.e distance of the curve from the left) */
  --c:red;  /* Color of the curve*/
}
.box:before,
.box:after{
  content:"";
  position:absolute;
  z-index:-1;
  height:calc(50% - var(--l)); /* each one will take half the height minus border width*/
  border-style:solid;
  border-color:var(--c);
}
/* Left part */
.box:before {
   bottom:0;
   left:0;
   width:var(--w);
   border-width:0 var(--l) var(--l) 0; /* Right & Bottom*/
   border-radius:0 0 var(--r) 0; /* Bottom-right*/
}
/* Right part*/
.box:after {
   top:0;
   right:calc(-1 * var(--l)); /* Move slightly to the right to have a perfect join */
   width:calc(100% - var(--w));
   border-width:var(--l) 0 0 var(--l); /* Top & Left */
   border-radius:var(--r) 0 0 0; /* Top-Left*/
}

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

<div class="box" style="--r:40px;--l:5px;--w:70%;--c:green">
</div>

<div class="box" style="--r:100px;--l:2px;--w:100px;--c:blue">
</div>

С градиентом и без прозрачности вы можете рассчитывать на множественную окраску фона для аппроксимации.Идея состоит в том, чтобы иметь нужный градиент ниже, и вы покрываете его другими слоями, чтобы держать только видимую кривую: 

.box {
  --w:4px;
  height:150px;
  position:relative;
  z-index:0;
  background:
    radial-gradient(farthest-side at bottom right,grey calc(100% - var(--w) + 1px),transparent calc(100% - var(--w) + 1px) 99%,grey) top 0 right calc(40% - 0.6*56px + var(--w)/2)/54px 50%,
    radial-gradient(farthest-side at top left,grey calc(100% - var(--w) + 1px),transparent calc(100% - var(--w) + 1px) 99%,grey)  bottom 0 left calc(60% - 0.4*56px + var(--w)/2)/54px 50%,
    
    
    linear-gradient(grey,grey) bottom right/calc(40% - 50px)  calc(100% - var(--w)),
    linear-gradient(grey,grey) bottom right/calc(40% - var(--w)/2 + 1px) 50%,
    linear-gradient(grey,grey) top    left /calc(60% - 50px) calc(100% - var(--w)),
    linear-gradient(grey,grey) top    left /calc(60% - var(--w)/2 + 1px) 50%,
    
    
    linear-gradient(to right, yellow, purple, blue, green, red, orange);
  background-repeat:no-repeat;
  border-top:10px solid grey;
  border-bottom:10px solid grey;
}
<div class="box"></div>

<div class="box" style="--w:6px"></div>

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

.box {
  --w:4px;
  height:150px;
  position:relative;
  z-index:0;
  background:
    radial-gradient(farthest-side at bottom right,pink calc(100% - var(--w) + 1px),transparent calc(100% - var(--w) + 1px) 99%,red) top 0 right calc(40% - 0.6*56px + var(--w)/2)/54px 50%,
    radial-gradient(farthest-side at top left,yellow calc(100% - var(--w) + 1px),transparent calc(100% - var(--w) + 1px) 99%,orange)  bottom 0 left calc(60% - 0.4*56px + var(--w)/2)/54px 50%,
    
    
    linear-gradient(green,green) bottom right/calc(40% - 50px)  calc(100% - var(--w)),
    linear-gradient(purple,purple) bottom right/calc(40% - var(--w)/2 + 1px) 50%,
    linear-gradient(blue,blue) top    left /calc(60% - 50px) calc(100% - var(--w)),
    linear-gradient(black,black) top    left /calc(60% - var(--w)/2 + 1px) 50%,
    
    
    /*linear-gradient(to right, yellow, purple, blue, green, red, orange)*/
    white;
  background-repeat:no-repeat;
  border-top:10px solid grey;
  border-bottom:10px solid grey;
}
<div class="box"></div>

<div class="box" style="--w:6px"></div>

Связанный вопрос, чтобы получить более подробную информацию о различных значениях: Использование процентных значений с background-position на линейном градиенте

Другая идея (на основе первого кода) иметь градиент, но все еще без прозрачности: 

.box {
  height:150px;
  margin:10px 0;
  position:relative;
  overflow:hidden;
  z-index:0;
  --l:3px;  /* Thickness of the curve */
  --r:90px; /* The curve radius */
  --c:to right, yellow, purple, blue, green, red, orange;  /* Color of the curve*/
}
.box:before,
.box:after{
  content:"";
  position:absolute;
  z-index:-1;
  height:calc(50% - var(--l));
  border-style:solid;
  border-color:transparent;
  background:
    linear-gradient(pink,pink) padding-box, /* The same as the main background only on the padding-box*/
    linear-gradient(var(--c)) border-box;   /* Main coloration will cover the border-box */
}
.box:before {
   bottom:0;
   left:0;
   width:40%;
   border-width:0 var(--l) var(--l) 0;
   border-radius:0 0 var(--r) 0;
   background-size:calc(100/40 * 100%) 200%; /* 100/X where X is the width*/
   background-position:left bottom;
}
.box:after {
   top:0;
   right:calc(-1 * var(--l));
   width:60%;
   border-width:var(--l) 0 0 var(--l);
   border-radius:var(--r) 0 0 0;
   background-size:calc(100/60 * 100%) 200%; /* 100/X where X is the width*/
   background-position:right top;
}

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

<div class="box" style="--r:40px;--l:10px;--c:to bottom,red,yellow,green">
</div>

<div class="box" style="--r:100px;--l:2px;--c:45deg,purple,#000,orange">
</div>
...