CSS画三角形的快捷方式

最新推荐文章于 2024-09-23 20:27:30 发布

原创最新推荐文章于 2024-09-23 20:27:30 发布 · 139 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css3画三角形

CSS 专栏收录该内容

5 篇文章

订阅专栏

效果图
在这里插入图片描述
代码

.proitem{
  position: relative;
  &::after{
    content: '';
    height: 0;
    width: 0;
    position: absolute;
    left: -.2rem;
    top: 45%;
    margin-top: -.03rem;
    border-width: .1rem;
    border-style: solid;
    border-color:  transparent $color-white transparent transparent;
  }
}

关键点
border-color: transparent $color-white transparent transparent;
箭头朝哪,哪边的颜色就用你想要的显示出来就可以