怎樣才能讓一個語音盒與直角三角形（CSS）

Question

我試圖讓一個div左上角看起來有點像一個演講盒三角形，目前我有這樣的：

.bubble 
 
{ 
 
position: relative; 
 
width: 240px; 
 
height: 120px; 
 
padding: 12px; 
 
background: brown; 
 
-webkit-border-radius: 0px; 
 
-moz-border-radius: 0px; 
 
border-radius: 0px; 
 
margin-left: 30px; 
 
margin-top: 30px; 
 
} 
 

 
.bubble:after 
 
{ 
 
content: ''; 
 
position: absolute; 
 
border-style: solid; 
 
border-width: 17px 23px 17px 0; 
 
border-color: transparent brown; 
 
display: block; 
 
width: 0; 
 
z-index: 1; 
 
left: -23px; 
 
top: 0px; 
 
}

<div class="bubble"></div>

我期待有它喜歡：

Answer 1

.bubble 
 
{ 
 
position: relative; 
 
width: 240px; 
 
height: 120px; 
 
padding: 12px; 
 
background: brown; 
 
-webkit-border-radius: 0px; 
 
-moz-border-radius: 0px; 
 
border-radius: 0px; 
 
margin-left: 30px; 
 
margin-top: 30px; 
 
} 
 

 
.bubble:after 
 
{ 
 
content: ''; 
 
position: absolute; 
 
border-style: solid; 
 
border-width: 0px 23px 17px 0; 
 
border-color: transparent brown; 
 
display: block; 
 
width: 0; 
 
z-index: 1; 
 
left: -23px; 
 
top: 0px; 
 
}

<div class="bubble"></div>

這裏試試這個，我刪除了你的風格的邊框上面，所以它是這樣的，border-width: 0px 23px 17px 0;。讓我知道這是你的目標。

編輯：順便說一句，如果你想對這個三角形進行一些調整，你可以調整border-right和border-bottom，使它看起來像你在圖像中顯示的內容。