css画三角形

最新推荐文章于 2024-05-06 01:15:56 发布

原创最新推荐文章于 2024-05-06 01:15:56 发布 · 414 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css #三角形

小案例专栏收录该内容

13 篇文章

订阅专栏

本文介绍了一种使用CSS边框属性创建红色三角形的方法。通过设置div元素的宽度为0并利用边框颜色和透明度，可以巧妙地绘制出一个纯红色的向上指向的三角形。这种技巧适用于网页设计中需要简洁图标或装饰元素的场景。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>三角形</title>
    <style type="text/css">
      * {
        margin: 0;
        padding: 0;
      }
      div {
        width: 0px; /*宽度必须加，否则默认为页面宽度的100%*/
        border: 10px solid transparent;
        border-top-color: red;
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>