Плавное изменение размера границы

192

19 ноября 2020, 01:10

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

Сейчас я сомневаюсь, что это возможно сделать с применением только CSS / HTML. Или я ошибаюсь?

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

Есть ли другое решение?

Answer 1

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

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

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Градиент для одной буквы

Возникла такая проблемка: не могу реализовать градиент только для одной буквы:

130

HTML

Спрятать часть изображения

На данном примере мы видим, что изображение не помещается по высоте в заданную область и сжимает не пропорционально

124

Как перевернуть ListBox

Я делаю калькулятор, и хочу в листбокс отправлять историюНо нужно чтоб она была не сверху вниз, а снизу вверх, то есть мне нужно развернуть...

132

Работа с таймерами в приложении Xamarin.Forms

В приложении XamarinForms необходимо реализовать таймер, срабатывающий через заданный интервал времени

111