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

Css3
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

Previous: How to use the less public variable in nuxt

Next: Recently, npm install has been reminding github login

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1b2eb38-2bc28.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1b2eb38-2bc28.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?