CSS之画常见的图形

大超-无痕

于 2024-02-15 13:16:52 发布

阅读量1k

点赞数 11

分类专栏： CSS 文章标签： css 前端 javascript

本文链接：https://blog.csdn.net/dachaoxuexi/article/details/136119502

版权

本文介绍了如何使用CSS的border、clip-path、transform等属性以及SVG实现三角形、正方形、五边形、六边形、圆形、平行四边形、梯形、椭圆和菱形等基本几何形状，并提醒读者注意不同浏览器的兼容性问题。

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

1.三角形

  .shape {
        width: 0;
        height: 0;
        border-top: 100px solid rgba(0, 0, 0, 0);
        border-right: 100px solid rgba(0, 0, 0, 0);
        border-bottom: 100px solid blue;
        border-left: 100px solid rgba(0, 0, 0, 0);
      }

在这里插入图片描述

使用border属性实现。宽高设置为0，border里其中一个方向设置为想要的颜色，其他的设置为完全透明的颜色。

2. 正方形

  .shape {
        width: 100px;
        height: 100px;
        background-color: lightcoral;
      }

在这里插入图片描述
正方形都会画，纯属占个位子。。

3. 五边形

 .shape {
        width: 100px;
        height: 100px;
        background-color: blue;
        clip-path: polygon(50% 0%, 1

最低0.47元/天解锁文章