半三角形CSS與邊境半徑

Question

我有一個CSS半三角形的這個代碼，但我需要把它的邊界半徑在三角形的中點，如圖像：

width: 0; 
height: 0; 
border-style: solid; 
border-width: 0px 30px 20px 0; 
border-color: transparent #bde5ff transparent transparent; 
border-top-left-radius: 2px; 

任何想法？

Answer 1

可以實現與border-radius和transform: skew()您的三角形元素上的組合效應。在傾斜元素的情況下，邊框半徑效果保留在角落。

這裏是一個工作單元素示例。根據您的需要調整相應的值。

div { 
 
    width: 150px; 
 
    height: 150px; 
 
    position: relative; 
 
    background: lightblue; 
 
    border-radius: 8px; 
 
    margin-left: 30px; 
 
} 
 
div::before { 
 
    position: absolute; 
 
    left:0; 
 
    top: 20px; 
 
    content: ""; 
 
    width: 40px; 
 
    height: 40px; 
 
    border-radius: 8px; 
 
    background: lightblue; 
 
    transform: skew(50deg); 
 
}

<div></div>