Why is it that css writes the right trapezoidal page style, but not the right style when printed on A4 paper?

Why does css write the right trapezoidal page style but not print it to A4 paper?
css code:

<style>
    .tab { 
        position: relative; 
        display: inline-block;
         padding: .5em 1em .35em; 
    } 
    .tab::before { 
        content: ""; /* To generate the box */ 
        position: absolute; top: 0; right: 0; bottom: 0; left: 0; 
        z-index: -1; 
        background: -sharpfff; 
        border: 5px solid pink; 
        transform: perspective(.5em) rotateX(5deg);
    }
    </style>

html Code:

<div class="tab">
    hahah
</div>

this is the page effect:

clipboard.png

ctr+p :

clipboard.png


clipboard.png

Mar.03,2021

first of all, you need to know clearly that print styles and browsers are not compatible with CSS, just like the latest versions of chrome and IE8 are compatible with css.

so don't expect the printed style to be the same as what your browser sees

here is a tips and essentials of print style CSS . I hope it will be helpful to you

. < H1 > modify-1 < / H1 >

do not know what your code is, it should be a compatibility problem.

the following code is a

that can be previewed in the print interface.
<style>

.temp{  
    width:100px;  
    height:0;  
    border-width:0 25px 50px 25px;  
    border-style:none solid solid;  
    border-color:transparent transparent red;  
}  
</style>

<div class="temp">Hello</div>

- 2

demo1 div


demo2


Menu