html - 我怎样才能制作一个直 Angular 三 Angular 形的语音框(CSS)

Question

我想让一个 div 看起来有点像左上角带有三 Angular 形的语音框，目前我有这个:

.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-top，所以它是这样的，border-width: 0px 23px 17px 0;。让我知道这是否是您的目标。

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