如何制作一个带有直角三角形（CSS）的语音盒

Question

我试图让div看起来有点像左上角有三角形的语音框，目前我有这个：

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

我希望得到它：

Answer 1

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

在这里尝试这个，我删除了你的风格的border-top，所以就像这样border-width: 0px 23px 17px 0;。如果这是你的目标，请告诉我。

编辑：顺便说一句，如果您想对该三角形进行一些调整，可以调整border-right和border-bottom，使其看起来像您在图片中显示的内容。