css圆角梯形，动态边框

<style type="text/css">
            .aadiv {
              width: 80px;
              height: 80px;
              background-color: skyblue;
              border-radius: 8px;
            }

            .skewed {
                width: 80px;
                  height: 80px;
                position: relative;
                padding: .3em 1em  0;
                text-decoration: none;
                display: inline-block;
                border-radius: 8px;
              /*transform: skew(-10deg); 
              background-color: pink;
              border-radius: 8px;*/
            }
            .skewed::before{ 
                 content: '';
                 position: absolute;
                 top: 0;
                 left: 0;
                 right: 0;
                 bottom: 0;
                 background: pink;
                 border: 1px solid #ff9900;
                 border-radius: 8px;
                -webkit-transform: perspective(0.5em)scale(1.1,1.3) rotateX(5deg);
                  -moz-transform: perspective(0.5em)scale(1.1,1.3) rotateX(5deg);
                  -ms-transform: perspective(0.5em)scale(1.1,1.3) rotateX(5deg);
                  -o-transform: perspective(0.5em)scale(1.1,1.3) rotateX(5deg);
                  transform: perspective(0.5em)scale(1.1,1.3) rotateX(5deg);
      
    　　　　　　　　　　z-index: -1;    
    　　　　　　　　　　-webkit-transform-origin:bottom right;  
                transform-origin:bottom right;      
             }
        </style>

<div class="aadiv">Normal</div>
<div class="skewed">Skewed</div>

<style>

div {
    background: 
        linear-gradient(90deg, #333 50%, transparent 0) repeat-x,
        linear-gradient(90deg, #333 50%, transparent 0) repeat-x,
        linear-gradient(0deg, #333 50%, transparent 0) repeat-y,
        linear-gradient(0deg, #333 50%, transparent 0) repeat-y;
    background-size: 4px 1px, 4px 1px, 1px 4px, 1px 4px;
    background-position: 0 0, 0 100%, 0 0, 100% 0;
}
div:hover {
    animation: linearGradientMove .3s infinite linear;
}

@keyframes linearGradientMove {
    100% {
        background-position: 4px 0, -4px 100%, 0 -4px, 100% 4px;
    }
}

</style>

<div id="box1">1</div>
<div id="box2">2</div>
<div id="box3">3</div>