帶三角形的對話框有2中方，一下分別用示例做介紹 方法1；向左和向右 向右 ~~~ .box-you{ position:relative; width:200px; height:100px; border:1px solid red; border-radius:3px; text-align:center; line-height:100px; } .box-you:after { content:''; position:absolute; right:-19px; top:16px; border:10px solid transparent; border-left-color:white; } .box-you:before { content:''; position:absolute; right:-20px; top:16px; border:10px solid transparent; border-left-color:red; } <div class="box-you"> 箭頭右 </div> ~~~ 向左 ~~~ .box-zou{ margin-top: 20px; margin-left: 20px; position: relative; width:200px; height:100px; border:1px solid red; border-radius:3px; text-align:center; line-height:100px; } .box-zou:before{ content:""; position: absolute; left:-20px; top:50%; margin-top: -10px; border: 10px solid transparent; border-right-color:red; } .box-zou:after{ content:""; position: absolute; left:-19px; top: 50%; margin-top: -10px; border: 10px solid transparent; border-right-color: white } <div class="box-zou"> 箭頭左方法一 </div> ~~~ 效果： 方法2：向下和向上，用的是旋轉 向下； ~~~ .box2-xia{ margin-top: 20px; margin-left: 20px; position: relative; width:150px; height:180px; background: #cac; text-align: center; } .box2-xia:before{ content:""; width:10px; height:10px; background:#cac;/*此處用的事填充色*/ position: absolute; bottom:-5px; left:50%; margin-left: -5px; transform:rotate(45deg); } div class="box2-xia"> 箭頭下 方法二 填充色 </div> ~~~ 向上 ~~~ .box2-shang{ margin-top: 40px; margin-left: 20px; padding-top: 10px; position: relative; width:150px; height:180px; border:1px solid #f00; text-align: center; } .box2-shang:before{ content:""; width:10px; height:10px; background:#fff; border:1px solid transparent; border-top-color: red; border-left-color: red;/*此處用的邊框*/ position: absolute; top:-6px; left:50%; margin-left: -5px; transform:rotate(45deg); } <div class="box2-shang"> 箭頭下，方法2 無填充色 </div> ~~~ 效果