CSS实现对角边框样式

CSS实现对角框，边角加个边框、四角框

一：线性渐变方式：

鼠标悬停触发显示
:hover {
              background: linear-gradient(to left, #043add, #043add) left top no-repeat,
                linear-gradient(to bottom, #043add, #043add) left top no-repeat,
                linear-gradient(to left, #043add, #043add) right bottom no-repeat,
                linear-gradient(to left, #043add, #043add) right bottom no-repeat;
              /*设置大小*/
              background-size: 0.12rem 1rem, 1rem 0.12rem;
            }

二：伪类

默认是透明opacity: 0; 鼠标悬停触发显示
增加css3过渡效果，显示更平滑

:before {
              position: absolute;
              bottom: 0;
              left