I apologize in advance for inaccuracies in terminology, but I never worked on the web, but the moment came when I had to.

I adapt the css style to my needs: you must set the border-width to 50% of the width of the parent element

HTML:

<div class="effect eff-18"> <img src="images/_project_lock.jpg" alt="" /> <div class="overlay"> <div class="icon"></div> </div> <div class="triangle-set"> <div class="triangle triangle-1"></div> <div class="triangle triangle-2"></div> <div class="triangle triangle-3"></div> <div class="triangle triangle-4"></div> </div> <div class="caption"> <h4>Title</h4> <p> Descr </p> <a class="btn" href="#" title="View More">View More</a> </div> </div>

Initially, the style was with a hard-coded width and height value that looked something like this:

 .eff-18 { width: 300px; height: 300px; overflow: hidden; cursor: pointer; position: relative; } .eff-18 img { min-width: 100%; min-height: 100%; } .eff-18 .overlay { width: 45px; height: 100%; position: absolute; right: 0; top: 0; background: rgba(255,255,255,0.6); -moz-transition: all 0.15s linear 0s; -o-transition: all 0.15s linear 0s; -ms-transition: all 0.15s linear 0s; -webkit-transition: all 0.15s linear 0s; transition: all 0.15s linear 0s; } .eff-18 .overlay .icon { width: 35px; height: 23px; background: url('http://eisenpar.com/view-icon.png') 0 0 no-repeat; position: absolute; top: 46%; left: 6px; } .eff-18 .triangle-set { width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; } .eff-18 .triangle { position: absolute; width: 0px; height: 0px; opacity: 0; border: 5px solid transparent; -moz-transition: opacity 0.15s linear 0s, border-width 0.35s linear 0.1s; -o-transition: opacity 0.15s linear 0s, border-width 0.35s linear 0.1s; -ms-transition: opacity 0.15s linear 0s, border-width 0.35s linear 0.1s; -webkit-transition: opacity 0.15s linear 0s, border-width 0.35s linear 0.1s; transition: opacity 0.15s linear 0s, border-width 0.35s linear 0.1s; } .eff-18 .triangle-1 { border-top: 5px solid rgba(255,255,255,0.6); top: 0px; left: 0px; } .eff-18 .triangle-2 { border-right: 5px solid rgba(255,255,255,0.6); top: 0px; right: 0px; } .eff-18 .triangle-3 { border-bottom: 5px solid rgba(255,255,255,0.6); bottom: 0px; right: 0px; } .eff-18 .triangle-4 { border-left: 5px solid rgba(255,255,255,0.6); bottom: 0px; left: 0px; } .eff-18 .caption { position: absolute; top: 100%; left: 0px; width: 100%; height: 100%; text-align: center; color: white; -moz-transition: all 0.2s linear 0s; -o-transition: all 0.2s linear 0s; -ms-transition: all 0.2s linear 0s; -webkit-transition: all 0.2s linear 0s; transition: all 0.2s linear 0s; } .eff-18 .caption h4 { width: 80%; margin: 40px auto 0px auto; background: rgba(0,0,0,0.7); font-weight: 400; text-transform: uppercase; font-size: 22px; padding: 6px 0px; position: relative; } .eff-18 .caption h4:before { content: ""; width: 0px; height: 0px; display: block; border: 20px solid transparent; border-top: 20px solid rgba(0,0,0,0.7); position: absolute; top: 100%; left: 42%; } .eff-18 .caption p { width: 100%; max-width: -webkit-calc(80% - 20px); max-width: -o-calc(80% - 20px); max-width: -moz-calc(80% - 20px); max-width: -ms-calc(80% - 20px); max-width: calc(80% - 20px); margin: 40px auto 0px auto; background: rgba(0,0,0,0.8); font-weight: 400; padding: 6px 10px; font-size: 14px; } .eff-18 .caption a { display: inline-block; margin: 30px auto 0px auto; background-color: #7F3B1B; color: inherit; padding: 7px 20px; font-size: 15px; box-shadow: inset 0px 0px 7px 1px rgba(0,0,0,0.2); border-radius: 5px; text-decoration: none; } .eff-18:hover .triangle { opacity: 1; border-width: 150px; } .eff-18:hover .overlay { right: -45px; } .eff-18:hover .overlay .icon { opacity: 0; } .eff-18:hover .caption { top: 0px; -moz-transition-delay: 0.35s -o-transition-delay: 0.35s -ms-transition-delay: 0.35s -webkit-transition-delay: 0.35s transition-delay: 0.35s }

Began to move away from hardcode values:

 .eff-18 { width: 100%; height: 100%; overflow: hidden; cursor: pointer; position: relative; }

It remains to set the border-width of the hover effect to 50% of the width of the entire container.

I tried this:

 .eff-18:hover .triangle { opacity: 1; border-width: 50%; }

Naturally nothing happened. How can I attach to the width of the parent I do not understand.

Ie, you need to do something like this

  border-width: width * 0.5;

Does css allow a similar entry? Thank you in advance.

I hope clearly explained the problem :-)

  • If the sizes are known in advance, the preprocessors (SASS, LESS, Stylus) do an excellent job with the task (and other routine), another option is to emulate (visibility) the border with a div, and set the dimensions in percent. - Vladimir Gamalyan

5 answers 5

If anything, for modern browsers this option is suitable:

 от ширины viewport-а border-width: calc( (толщина бордера)vw / 10) от высоты viewport-а border-width: calc( (толщина бордера)vh / 10)

An example can be seen on the slider buttons on the EMPATIO website .

  • one
    It is better to make an example right here, using a snippet, in which the code is executed in HTML + CSS + JS. And then on a third-party site, the code can change and the example will cease to be an example. ) - Nick Volynkin ♦
  • I'm new here, and I don't know how to make a snippet here. and if there is a change, I will change here, too. website made by me - RedBuld

border-width , it is necessary to set not in percents, but in pixels

 class{ border-width: 1px 2px 3px 4px ;/это если каждой стороне задавать разное значение } class{ border-width: 1px ;/это если у всех сторон одно значение }
  • The task was to set the border-width in half of the width. But as I understood with the css tools, this was not done, thanks for the help - Roman Novoselov

So you can, the container is still always equal to 100% for a child.
border-width: calc(100% / 2);

    Nothing smarter comes to mind, because in css it is not possible to use percentages for a border :

     .wrap{ width: 200px; background: red; padding: 0 25%; } .content{ background: #fff; } 
     <div class="wrap"> <div class="content">content</div> </div>

      You should replace the border with padding . If necessary, add another vrpper for content.

      • To understand, you need a detailed answer with an example (working code in the sandbox). Put a minus. - Alexander Kazakov
      • @AlexandrKazakov, ok, let it be. Perhaps the answer really does not fit the question, although it is suitable for other situations. - Qwertiy ♦