CSS - постоянный размер изображения границы - PullRequest
Новая
       51

CSS - постоянный размер изображения границы

0 голосов
/ 30 ноября 2018

ОПИСАНИЕ: Я пытаюсь получить постоянный размер изображения границы при изменении размера div.Я думаю о решении этого с помощью псевдоэлементов, но есть ли способ сделать вещи проще?

HTML: 

<div id="resizable" class="ui-widget-content">
  <h3>Resizable</h3>
</div>

CSS: 

body {
  background: white;
}
#resizable {
  border: 25px solid !important;
  border-image: url(https://svgur.com/i/9c2.svg) 15 round !important;
  background: white
}

VISUAL:

enter image description here

JSFIDDLE: https://jsfiddle.net/3twuq14z/

Ответы [ 2 ]

0 голосов
/ 30 ноября 2018

Да, вы можете сделать: 

$("#resizable").resizable({
 aspectRatio: 9/ 9,
 });

body {
  background: white;
}
#resizable {
  border: 25px solid transparent;
  border-image: url(https://svgur.com/i/9c2.svg) 30 round;
  background: white;
  width:100px;
  height:100px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="resizable" class="ui-widget-content">
  <h3>Resizable</h3>
</div>

https://jsfiddle.net/3twuq14z/2/

0 голосов
/ 30 ноября 2018

Jus добавьте это свойство в ваш SVG-файл: vector-effect="non-scaling-stroke" в SVG-путь.Посмотрите здесь (я заново загрузил ваш SVG-файл): https://jsfiddle.net/dswLmaxo/

...