Question

我有两个切换标签，每个标签宽度为50％。两者都是可点击的标签。标签的中间边框需要倾斜。我尝试了偏斜属性。但是标签内的文字也变得偏斜了。我如何实现倾斜的中间边界。无论如何只有css边界才能实现？

.toggleBtnRight {
    border: 1px solid white;
    background: none;
    font-family: 'Futura LT BOLD' !important;
    color: #005695;
    font-size: 0.7em;
    text-align: center;
    margin: auto;
    float: right;
    font-weight: bolder;
    padding-top: 10px;
    padding-bottom: 10px;
    width: 50%;
}
.toggleBtnLeft {
    border: 1px solid white;
    background: none;
    font-family: 'Futura LT BOLD' !important;
    color: #005695;
    font-size: 0.7em;
    text-align: center;
    margin: auto;
    float: left;
    font-weight: bolder;
    padding-top: 10px;
    padding-bottom: 10px;
    width: 50%;
}




   .clickedBtn { 
background: #f3f3f5 !important; 
border-bottom: 1px solid #c6c6c7 !important; 
border-left: 1px solid #c6c6c7 !important;
 border-right: 1px solid #c6c6c7 !important;
 }

Answer 1

你可以通过添加一些像:before这样的伪元素来添加背景和边框，然后在该元素中添加transforms，如

.toggleBtnRight:before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 10px;
    left: 0;
    z-index: -1;
    border: .1em solid #aaa;
    border-bottom: none;
    /* border-radius: 10px 10px 0 0; */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(229,229,229,1)));
    background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%);
    background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(229,229,229,1) 100%);
    background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%);
    -webkit-transform: perspective(5px) rotateX(2deg);
    transform: perspective(5px) rotateX(2deg);
    -webkit-transform-origin: left;
    transform-origin: left;
}

有关详细信息，请查看demo

如何使用两个选项卡创建倾斜的中间边框

1 个答案: