css-----:after :before绘制三角形

最新推荐文章于 2024-06-19 14:48:22 发布

cyl97

最新推荐文章于 2024-06-19 14:48:22 发布

阅读量1.9k

点赞数

分类专栏： css 文章标签： css

本文链接：https://blog.youkuaiyun.com/cyl97/article/details/115417769

版权

css 专栏收录该内容

2 篇文章

订阅专栏

本文主要介绍了如何利用CSS的`:before`和`:after`伪元素结合边框技巧来创建三角形，包括遮挡盒子边框部分实现三角效果的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.遮挡盒子本身一部分边框

在这里插入图片描述

// less
.parentBox {
		position: relative;
        &:after {
          //正常带父盒子边框颜色的三角形
          position: absolute;
          top: -20px;
          right: 10px;
          border: solid transparent;
          content: ' ';
          height: 0;
          width: 0;
          border-width: 10px;
          //尖朝上，bottom。以此类推
          border-bottom-color: #f5dce4;
        }
        &:before{
         //白色三角形，和父盒子背景色保持一致，调整位置，遮挡:after的三角形，达成效果
          position: absolute;
          top: -17px;
          right: 11px;
          border: solid transparent;
          content: ' ';
          height: 0;
          width: 0;
          //边框宽度要小于:after, 调整层级
          border-width: 9px;
          border-bottom-color: #fff;
          z-index: 9;
        }
}

2.css三角形

在这里插入图片描述

 .parentBox {
	position: relative;
	      &:after {
	          position: absolute;
	          top: -20px;
	          right: 0;
	          content: ' ';
	          border: 10px solid transparent;
	          border-bottom: 10px solid #ddd;
        }
}