css三角形角度怎么画

admin 轻心小站 关注 LV.19 运营
发表于前端技术学习版块 css,教程

CSS的三角形可以通过利用border属性来实现,根据使用的不同边框样式来创建不同方向的三角形。可以利用border宽度为0的特性来在需要的方向上添加边框,从而形成三角形。如下:.triangle-u

CSS的三角形可以通过利用border属性来实现,根据使用的不同边框样式来创建不同方向的三角形。可以利用border宽度为0的特性来在需要的方向上添加边框,从而形成三角形。如下:

.triangle-up {
  width: 0;
  height: 0;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  border-bottom: 30px solid #333;
} 

上述代码创建了一个朝上的等腰三角形,其中border-left和border-right属性设置为透明,border-bottom属性设置为需要的颜色。

如果想创建朝下的等腰三角形,只需要将bottom改为top即可:

.triangle-down {
  width: 0;
  height: 0;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  border-top: 30px solid #333;
} 

同理,如果要创建朝左或朝右的三角形,只需要改变对应的属性即可:

.triangle-left {
  width: 0;
  height: 0;
  border-top: 30px solid transparent;
  border-right: 30px solid #333;
  border-bottom: 30px solid transparent;
}

.triangle-right {
  width: 0;
  height: 0;
  border-top: 30px solid transparent;
  border-left: 30px solid #333;
  border-bottom: 30px solid transparent;
} 

以上代码分别创建了朝左和朝右的等腰三角形,在需要的方向上设置对应颜色的边框即可。

文章说明:

本文原创发布于探乎站长论坛,未经许可,禁止转载。

题图来自Unsplash,基于CC0协议

该文观点仅代表作者本人,探乎站长论坛平台仅提供信息存储空间服务。

评论列表 评论
发布评论

评论: css三角形角度怎么画

粉丝

0

关注

0

收藏

0

已有0次打赏