自定义三角形_带三角形的边框

最新推荐文章于 2022-08-20 22:22:58 发布

前端萌新小菜鸟

最新推荐文章于 2022-08-20 22:22:58 发布

阅读量249

点赞数

分类专栏： HTML css

本文链接：https://blog.csdn.net/weixin_45045834/article/details/112939662

版权

HTML 同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

css

1 篇文章 0 订阅

订阅专栏

这段代码展示了如何使用CSS伪元素`:before`和`:after`创建带有三角形边框的自定义形状。通过调整边框宽度和透明度，可以在左、右侧生成指向外部或内部的三角形。此技术常用于消息提示或者箭头指示等设计中，且适用于前端开发中的定位和布局。

摘要由CSDN通过智能技术生成

自定义三角形_带三角形的边框

代码:
注意:父盒子需要定位 position: relative

.leftMsg::before {
  box-sizing: content-box;
  width: 0px;
  height: 0px;
  position: absolute;
  left: -16px;
  top: 14px;
  padding: 0;
  border-right: 8px solid #ffffff;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 8px solid transparent;
  display: block;
  content: "";
  z-index: 12;
}
.leftMsg::after {
  box-sizing: content-box;
  width: 0px;
  height: 0px;
  position: absolute;
  left: -18px;
  top: 13px;
  padding: 0;
  border-right: 9px solid #3cacb6;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 9px solid transparent;
  display: block;
  content: "";
  z-index: 10;
}
.rightMsg::before {
  box-sizing: content-box;
  width: 0px;
  height: 0px;
  position: absolute;
  right: -16px;
  top: 14px;
  padding: 0;
  border-right: 8px solid transparent;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 8px solid#ffffff;
  display: block;
  content: "";
  z-index: 12;
}
.rightMsg::after {
  box-sizing: content-box;
  width: 0px;
  height: 0px;
  position: absolute;
  right: -18px;
  top: 13px;
  padding: 0;
  border-right: 9px solid transparent;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 9px solid #3cacb6;
  display: block;
  content: "";
  z-index: 10;
}