Skip to main content

Forums

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #269034
    Chum
    Participant

    Hi,

    First, please excuse my poor english.

    Second, I have some stupid question in my mind.

    How can a border of an ““ HTML element be replaced by some (irregular) SVG border? And how to make it responsive?

    This link for a better understanding: https://codepen.io/anon/pen/yKprmB.

    #269061
    Ricky55
    Participant

    You should be able to do this, can’t you just apply it as a background of the input?

    It would be responsive by just filling the input so it would do whatever they are doing if that makes sense.

    #269067
    Xiija
    Participant

    add a class to the inputs …

     <input id="name" class="brd" name="s" value="" type="text">
    

    add css for the border, with a link to your svg file?

    .brd
    {
      border: 10px solid black;
      height: 10vh;
      width: 100vh;
      border-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/652/pink-doily-bdr.png") 30;
      box-shadow: 1px 1px 3px black inset;
    }
    
    #269068
    Chum
    Participant

    Thanks guys and thank Xiija for your help.

    But, by applying these CSS rules, it’s doesnt exactly match what I’m expected to: the border-image property surrounds the input’s border but it won’t get over it.

    I’m not sure then if there is any solution with pure CSS…

    #269622
    wesh
    Participant

    Hi companion.

    Do you want something like that ? https://codepen.io/anon/pen/VXqOmX

    There are a lot of fixed values and I did that in two minutes. But it can serve as a basis for your work.

Viewing 5 posts - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.
icon-link icon-logo-star icon-search icon-star