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:" ";
css怎么创建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;
}
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论