仿微信聊天框箭头随笔

自先沉稳UP

已于 2022-05-10 18:59:58 修改

阅读量112

点赞数

分类专栏： css3，html 文章标签： css

于 2021-03-02 15:28:27 首次发布

本文链接：https://blog.csdn.net/Just_Maybe/article/details/114286335

版权

css3，html 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<div id="demo"></div>

<style>
#demo {
  width: 100px;
  height: 100px;
  background-color: #ccc;
  position: relative;
  border: 4px solid #333;
}

#demo:after, #demo:before {
  border: solid transparent;
  content: ' ';
  height: 0;
  left: 100%;
  position: absolute;
  width: 0;
}

#demo:after {
  border-width: 9px;
  border-left-color: #ccc;
  top: 15px;
}

#demo:before {
  border-width: 14px;
  border-left-color: #333;
  top: 10px;
}
</style>