創建對角邊框半徑

經過一段時間尋找解決方案後，我想出了一個。我想要做的是在第一個li元素的top left角落創建一個對角邊框..我嘗試使用涉及background屬性的解決方案，但它並沒有給我完全我想要的。此外，它不允許對後面將需要的顏色進行任何處理。創建對角邊框半徑

淺藍色應該是被切割的邊框（而不是被切割的背景），深灰色應該是li的背景。

我該如何通過CSS來實現？ JS/Jquery解決方案也可以。

編輯：看到了很多誤解的回答我的問題後，我會澄清了一點：

左圖是我現在，正確的形象應該是結果。

example pic expected result

.cal-scheme { 
    width: 100%; 

    li { 
     width: calc(100%/6); 
     height: 150px; 
     margin: 0; 
     padding: 0; 
     border: $thin-blue; 
     box-sizing: border-box; 
     float: left; 

     &:first-child { 
      background: linear-gradient(135deg, transparent 20px, $light-blue 0); 
      border: 0; 
     } 
    } 
}

來源

2015-01-03 Chrillewoodz

如何是你的邊界（lightblue）內的背景（darkgrey）？ –

@BogdanKuštan事實並非如此。我將背景燈變成藍色，以便您可以看到背景爲深灰色的問題。 – Chrillewoodz

這不可能通過'border-radius'實現，但是對這個屬性的一個提議的增強將允許你做你正在尋找的東西（搜索「css corner shape」）。與此同時，將這種效果應用於邊界將會有些不平凡。關於以這種方式倒角無邊界背景有許多問題，BogdanKuštan的答案中顯示了一個解決方案，但我不確定是否存在邊界。 – BoltClock

如果我理解的問題，你需要像this

HTML：

<ul> 
    <li></li> 
    <li></li> 
    <li></li> 
    <li></li> 
    <li></li> 
    <li></li> 
    <li></li> 
</ul>

CSS：

body { 
    background: darkgrey; 
} 
li { 
    display: block; 
    list-style: none; 
    width: 200px; 
    height: 50px; 
    background: lightblue; 
    position: relative; 
    border: 10px solid lightblue; 
    margin-top: 5px; 
} 

li:first-child:after { 
    content: ''; 
    display: block; 
    width: 0; 
    height: 0; 
    border: 15px solid transparent; 
    border-right-color: darkgrey; 
    position: absolute; 
    top: -15px; 
    left: -15px; 
    transform: rotate(45deg); 
}

更新：

你不能用邊界半徑來實現。只是使用CSS的形狀，或黑客這樣updated fiddle

HTML：

<ul> 
    <li></li> 
    <li></li> 
    <li></li> 
    <li></li> 
    <li></li> 
    <li></li> 
    <li></li> 
</ul>

CSS：

body { 
    background: darkgrey; 
} 
li { 
    display: block; 
    list-style: none; 
    width: 200px; 
    height: 50px; 
    background: darkgrey; 
    position: relative; 
    border: 2px solid lightblue; 
    margin-top: 5px; 
} 

li:first-child:after { 
    content: ''; 
    display: block; 
    width: 30px; 
    height: 30px; 
    background: darkgrey; 
    border-right: 2px solid lightblue; 
    position: absolute; 
    top: -17px; 
    left: -17px; 
    transform: rotate(45deg); 
}

來源

2015-01-03 11:18:06

The OP要求'border-radius'不是掩碼。 http://jsfiddle.net/q536p64b/1/ –

不是我所需要的。我需要邊框本身是對角線，而不是背景。 – Chrillewoodz

@ chipChocolate.py你無法使用'border-radius'。關鍵字**半徑**，如圈或省略號 –

如何實現，像這樣？沒有border-radius財產 WORKING FIDDLE

也有看The Shapes of CSS在CSS-技巧。

HTML

<div class="square"> 
    <div class="cut-fold"></div> 
</div>

CSS

body { 
    background: #2D2D2D; 
} 
.square { 
    background: #5E9EE8; 
    position: relative; 
    width: 300px; 
    height: 300px; 
} 
.cut-fold { 
    background: #2d2d2d; 
    height: 75px; 
    position: absolute; 
    top: -34px; 
    transform: rotate(45deg); 
    width: 30px; 
}

來源

2015-01-03 11:59:50

看一下預期的結果圖像，你的答案（@ThePragmatick）並沒有比我現有的嘗試更好地實現它。 – Chrillewoodz

創建對角邊框半徑

回答

相關問題