html中如何让方框有倾斜度,如何在CSS中创建带有边框的倾斜标签？

你可以尝试这种方法：

jsFiddle

而不是使用边框创建倾斜效果,我使用：after伪元素来创建它.这允许我在其周围设置边框.然后我使用：before伪元素来隐藏我不想看到的边框. CSS中的循环2px派生自边框宽度值.

CSS

.tab:before {

height: 50px;

width: 10px;

display: block;

content:" ";

background-color: #FFF;

position: absolute;

right: -2px;

top: -2px;

border-top: 2px solid blue;

border-bottom: 2px solid blue;

}

.tab {

height: 50px;

width: 150px;

border-radius: 10px 10px 0px 0px;

background-color: #FFF;

position: relative;

border: 2px solid blue;

}

.tab:after {

display: block;

content:" ";

width: 100px;

height: 50px;

top: -2px;

background-color: #FFF;

position: absolute;

right: -29px;

transform:skewX(45deg);

-ms-transform:skewX(45deg);

-webkit-transform:skewX(45deg);

border: 2px solid blue;

z-index: -1;

}