怎样才能让一个语音盒与直角三角形（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，使它看起来像你在图像中显示的内容。