Tạo đường viền chéo-bán kính

Question

Sau khi tìm kiếm một thời gian cho một giải pháp cho điều này tôi đã đưa ra không có. Những gì tôi đang cố gắng làm là tạo ra một biên giới chéo trên góc đầu tiên của yếu tố top left .. Tôi đã thử sử dụng một giải pháp có liên quan đến tài sản background nhưng nó không cho tôi những gì tôi muốn. Ngoài ra nó không cho phép bất kỳ thao tác nào về màu sắc cần thiết sau này.

Màu xanh nhạt phải là đường viền bị cắt (chứ không phải nền bị cắt) và màu xám đậm phải là nền của li.

Làm cách nào để có thể đạt được điều này thông qua CSS? Một giải pháp JS/Jquery cũng sẽ hoạt động.

EDIT: Sau khi nhìn thấy rất nhiều câu trả lời giải thích sai cho câu hỏi của tôi, tôi sẽ làm rõ điều này một chút:

Những hình ảnh bên trái là những gì tôi có bây giờ, hình ảnh bên phải nên kết quả.

.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; 
     } 
    } 
} 

Answer 1

Nếu tôi hiểu câu hỏi, bạn cần một cái gì đó giống như 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); 
} 

CẬP NHẬT:

Bạn không thể đạt được với bán kính đường viền. Chỉ cần sử dụng hình dạng css, hoặc hacks như updated fiddle

HTML này:

<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); 
} 

Answer 2

Làm thế nào về việc đạt được điều đó như thế này? mà không border-radius tài sản WORKING FIDDLE

Cũng có cái nhìn tại The Shapes of CSS trên css-trick.

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; 
}