CSS設計像邊界半徑

Question

我想知道這是否可能使用邊框半徑。

我想如果我點擊我要激活狀態是這樣的菜單。但我不知道是否可以使用邊界半徑。

到目前爲止，我已經做的唯一代碼使用的是

border-radius:10px; 

，但我要的是類似的東西在圖像上。

Answer 1

您可以使用僞元素，讓重疊的菜單項與菜單背景顏色的三角形：

對於如：

li{ 
 
    position: relative; 
 
    } 
 
li:after{ 
 
     content: ""; 
 
     width: 0; 
 
     height: 0; 
 
     border-style: solid; 
 
     border-width: 0 20px 20px 0;/*manage px values from 20 to what your need suits*/ 
 
     border-color: transparent #007bff transparent;/*use menu bg color instead of #007bff*/ 
 
     position: absolute; 
 
    }

<ul> 
 
    <li>menu item</li> 
 
</ul>

Answer 2

上active狀態嘗試border-right: 30px solid transparent;。 我認爲這將解決您的問題。

Answer 3

嘗試這樣的：Demo

<ul> 
    <li>Menu 1</li> 
    <li class="active">Menu 1</li> 
    <li>Menu 1</li> 
    <li>Menu 1</li> 
</ul> 

CSS：

body { 
    background-color:#E7D7B7; 
} 
ul li { 
    display:inline-block; 
    float:left; 
    margin-right:10px; 
    position:relative; 
    padding:5px 50px 5px 5px; 
} 
ul li.active { 
    display:inline-block; 
    float:left; 
    background-color:#CA8E26; 
    margin-right:10px; 
    position:relative; 
    padding-right:50px; 
} 
li.active:after { 
    border-style: solid; 
    border-width: 0 28px 28px 0; 
    border-color: transparent #E7D7B7 transparent transparent; 
    content:""; 
    position:absolute; 
    top:0; 
    right:0; 
} 

高達我所知，它不建議使用邊界半徑。可能是僞元素會起作用。您可以根據li's高度和填充來調整邊框寬度（28px）。使用邊框顏色作爲菜單欄顏色。所以它會與背景合併。