Граница с плавным изменением размера - PullRequest
Новая
       19

Граница с плавным изменением размера

5 голосов
/ 28 апреля 2019

Я пытаюсь добиться плавного перехода размера границы, как на картинке ниже:

Border

Сейчас я сомневаюсь, что это возможно с чистым CSS / HTML. Я не прав?

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

Есть ли другой подход?

1 Ответ

10 голосов
/ 28 апреля 2019

Вот приближение с использованием преобразования и перспективы (без прозрачности) 

.box {
  width: 200px;
  height: 100px;
  margin: 20px;
  position: relative;
  border: 20px solid red;
  border-width: 20px 3px 20px 20px;
  border-radius:55px;
  transform:perspective(112px) rotateY(5deg);
  z-index: 1;
}

.box:before {
  content: "";
  position: absolute;
  top: -5px;
  left: -5px;
  right: 35px;
  bottom: -5px;
  background: #fff;
  z-index: -1;
  border-radius: 40px;
  transform: perspective(112px) rotateY(-7deg);
  transform-origin: left;
}
<div class="box">

</div>

То, что вы можете достичь с помощью обоих псевдоэлементов, чтобы иметь возможность добавлять контент внутри: 

.box {
  width: 200px;
  height: 100px;
  margin: 20px;
  position: relative;
  z-index: 0;
  box-sizing: border-box;
  padding: 40px;
}

.box:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 20px solid red;
  border-width: 20px 3px 20px 20px;
  border-radius: 55px;
  transform: perspective(112px) rotateY(5deg);
  z-index: -1;
}

.box:after {
  content: "";
  position: absolute;
  top: 10%;
  left: 5%;
  right: 19%;
  bottom: 10%;
  background: #fff;
  z-index: 1;
  border-radius: 36px;
  transform: perspective(112px) rotateY(-7deg);
  transform-origin: left;
  z-index: -1;
}
<div class="box">
  some text
</div>

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

.box {
  max-width:200px;
  margin:10px;
  position:relative;
  padding:30px 20px;
  z-index:0;
  box-sizing:border-box;
  display:inline-block;
}
.box:before {
  content:"";
  position:absolute;
  z-index:-1;
  top:0;
  left:0;
  right:0;
  bottom:0;
  border:2px solid red;
  border-radius:40px;
  background:
    /*    gradient                                                    position       / size*/
    radial-gradient(circle at bottom right,transparent 23px,red 25px) top left       /34px 32px,  
    radial-gradient(circle at top right   ,transparent 23px,red 25px) bottom left    /34px 32px,
    linear-gradient(red,red)                                          left           /10px 100%,
    linear-gradient(to top left   ,transparent 45%,red 50%)           top left       /85% 10px,
    linear-gradient(to bottom left,transparent 45%,red 50%)           bottom left    /85% 10px;
  background-repeat:no-repeat;
  transform:perspective(100px) rotateY(5deg);
}

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

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

.box {
  max-width:200px;
  margin:10px;
  position:relative;
  padding:30px 20px;
  z-index:0;
  box-sizing:border-box;
  display:inline-block;
}
.box:before {
  content:"";
  position:absolute;
  z-index:-1;
  top:0;
  left:0;
  right:0;
  bottom:0;
  border:2px solid red;
  border-radius:40px;
  background:
    radial-gradient(circle at bottom right,transparent 23px,rgba(200,0,0,0.6) 25px) top left/34px 32px,  
    radial-gradient(circle at top right   ,transparent 23px,rgba(200,0,0,0.6) 25px) bottom left/34px 32px,
    linear-gradient(yellow,yellow) left/10px 100%,
    linear-gradient(to top left   ,white 45%,green 50%) top left   /85% 10px,
    linear-gradient(to bottom left,white 45%,black 50%) bottom left/85% 10px;
  background-repeat:no-repeat;
  transform:perspective(100px) rotateY(5deg);
}

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