我如何創建兩個標籤的傾斜中間邊框

-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

我如何創建兩個標籤的傾斜中間邊框

回答

相關問題