절반 삼각형

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>