通过css代码实现三角形

最新推荐文章于 2024-11-11 18:20:16 发布

偶吼吼吼

最新推荐文章于 2024-11-11 18:20:16 发布

阅读量143

点赞数

文章标签： css html

本文链接：https://blog.csdn.net/qq_45814232/article/details/109272086

版权

通过简单的css代码可实现漂亮的三角形

 <style>
    div{
      margin: 50px auto;
      width: 0px;
      height: 0px;
      background-color: transparent;
      border: 100px solid ;
      border-left-color: transparent;
      border-top-color: transparent;
      border-right-color: gray;
      border-bottom-color: transparent;
    }
  </style>
</head>
<body>
<div></div>
</body>

效果图

在这里插入图片描述
当然你也可以在此基础上实现其他样式

 <style>
    div{
      margin: 50px auto;
      width: 10px;
      height: 10px;
      background-color: transparent;
      border: 100px solid ;
      border-left-color: transparent;
      border-top-color: transparent;
      border-right-color: gray;
      border-bottom-color: darkslategray;
    }
  </style>
</head>
<body>
<div></div>
</body>