How to set border width as a percentage?

Question

css

There is a rubber block whose height is not specified. How to set the width of the top and bottom borders as a percentage?

Answer 1

No way. You can replace the border with before and after pseudo-elements and set the height as a percentage for them. But without specific code, it's hard to offer something more specific.

Answer 2

Hmm, it's interesting to me, why do you need this perversion... and maybe box-sizing: border-box; ?

Answer 3

Such a solution would help to make the relative width in a dynamically resizable window, that is, without page updates, but adaptively, but without javascript. Unfortunately there is no solution, the percentage cannot be set to the border.
BUT, there are values ​​that are taken into account in the border....strangely enough, these are vh and vw ))))
The only problem is, these values ​​completely ignore the scrollbar.
Here's what I got:

.home .top-banner .ban-for-mob:after {
    content: '';
    display: block;
    position: absolute;
    border-left: 50vw solid transparent;
    border-right: 50vw solid transparent;
    border-top: 50px solid #231f20;
    border-bottom: 0;
    top: 100%;
    left: 50%;
    margin-left: -50vw;
}

I tried it in one project, and it turned out such an "arrow" to the block, pointing to the lower block, while, apparently, adaptable.
Unfortunately, it is too early to use these values ​​in serious projects.
https://caniuse.com/#search=vh
And although support is shown for almost everyone except Opera-mini, nevertheless, in Russia, support is only 79.54%, that is, a good 20% of carriers are lucky. And who knows, maybe these 20% are the absolute majority of buyers/customers of your goods/services. For example, if they are students. And the goods are just for them. Or, on the contrary, people over 40 years old, and the goods are just for them. 20% - this is the 5th part of all Internet users in Russia .... this is not a little.
But the experiment is successful. Such values ​​will work with curbs and generally everywhere, you just need to wait for more support.