我如何创建两个标签的倾斜中间边框

-1

我有两个切换标签，每个标签的宽度都为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; 
}

来源

2016-11-18 kate

忘记添加样式为 .clickedBtn { \t background：＃f3f3f5！important; \t border-bottom：1px solid＃c6c6c7！important; \t border-left：1px solid＃c6c6c7！important; \t border-right：1px solid＃c6c6c7！important; \t } – kate

您可以编辑自己的帖子。只需在您的问题中添加上述评论样式 –

好的。我编辑过。我的问题是否会得到回答？ – kate

您可以通过添加一些伪元素像: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

来源

2016-11-18 12:08:44 jafarbtech

我如何创建两个标签的倾斜中间边框

回答

相关问题