用CSS制作三角形.

最新推荐文章于 2025-05-05 16:19:39 发布

weixin_34151004

最新推荐文章于 2025-05-05 16:19:39 发布

阅读量53

点赞数

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5b2ef62be51d4558dd698e0f

本文介绍了一种使用CSS边框属性来创建纯CSS三角形的方法。通过调整元素的宽高及边框颜色，可以轻松实现不同方向的三角形效果。

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

一. 三角形的制作

这里采用的方法是利用border的上下左右边框的收缩.

html部分

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>triangle</title>
</head>
<body>
  <div class = 'triangle'>
  </div>
</body>
</html>
复制代码

css部分

.triangle{
  height:20px;
  width:20px;
  border-top:10px solid grey;
  border-right:10px solid pink;
  border-bottom:10px solid blue;
  border-left:10px solid yellowgreen ;
}
复制代码

此时达到的效果如下

如何让他变成一个三角形呢?很简单,消灭他的宽高就行啦

嗯...看来还差点.那就让右和下边框也消失掉吧

  .triangle{
  height:0px;
  width:0px;
  border-top:10px solid yellowgreen;
  border-right:10px solid transparent;
  border-bottom:10px solid transparent;
  border-left:10px solid yellowgreen;
}
复制代码

大功告成