如何製作凹左邊框的三角形三角形？

Question

我想在CSS中製作this shape。我沒有能夠完美地獲得它。

Answer 1

看看這個，我已經完成了:before僞類。我們可以調整下面的代碼片段，以使它看起來像你需要：

.triangle { 
 
    width: 0; 
 
    height: 0; 
 
    border-style: solid; 
 
    border-width: 50px 0 50px 86.6px; 
 
    border-color: transparent transparent transparent #f00; 
 
} 
 

 
.triangle:before { 
 
    display: block; 
 
    content: " "; 
 
    position: absolute; 
 
    height: 100px; 
 
    width: 10px; 
 
    left: 3px; 
 
    top: 8px; 
 
    background: #fff; 
 
    border-radius: 100%; 
 
}

<div class="triangle"></div>

闖闖：

.triangle { 
 
    width: 0; 
 
    height: 0; 
 
    border-style: solid; 
 
    border-width: 50px 0 50px 86.6px; 
 
    border-color: transparent transparent transparent #f00; 
 
} 
 

 
.triangle:before { 
 
    display: block; 
 
    content: " "; 
 
    position: absolute; 
 
    height: 180px; 
 
    width: 110px; 
 
    left: -90px; 
 
    top: -30px; 
 
    background: #fff; 
 
    border-radius: 200%; 
 
}

<div class="triangle"></div>

Answer 2

該解決方案負全部依賴於CSS生成的內容，意味着沒有額外的標記。唯一需要注意的是，::after背景顏色必須與父元素背景顏色相匹配。

 
div::before { 
content:''; 
position:absolute; 
width: 0; 
height: 0; 
border-style: solid; 
border-width: 50px 0 50px 100px; 
border-color: transparent transparent transparent #007bff; 
} 

div::after{ 
content:''; 
display:block; 
width:50px; 
background:#fff; 
height:100px; 
position:absolute; 
border-radius:0 100% 100% 0; 
transform: scaleX(0.4); 
transform-origin:top left; 
} 

Demo here