用CSS实现左上朝向三角形有哪些方法，代码是什么

发布时间：2023-10-19 15:24:29 所属栏目：语言来源：

导读：今天我们介绍几种，用css实现左上朝向三角形（Top-Left Triangle）的写法。

这种三角形，一般可以用来做“对话框”类型图形的左下小脚。

第一种：

#triangle-topleft {

border: 30px so

今天我们介绍几种，用css实现左上朝向三角形（Top-Left Triangle）的写法。

这种三角形，一般可以用来做“对话框”类型图形的左下小脚。

第一种：

#triangle-topleft {

  border: 30px solid #e6686e;

  height: 0;

  width: 0;

  border-right-color: transparent;

  border-bottom-color: transparent;

}

第二种：

#triangle-topleft {

  width: 0;

  height: 0;

  border-top: 60px solid #e6686e;

  border-right: 60px solid transparent;

}

第三种:

#triangle-topleft {

  border: 60px solid transparent;

  width: 0;

  height: 0;

  border-left-color: #e6686e;

  border-top-width: 0;

}

大家可以尝试更多种的三角形做法，以及不同朝向的三角形。

（编辑：聊城站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!