css绘制梯形、直角三角形

最新推荐文章于 2025-11-15 10:57:49 发布

原创最新推荐文章于 2025-11-15 10:57:49 发布 · 2k 阅读

3 ·

CC 4.0 BY-SA版权

css 专栏收录该内容

12 篇文章

订阅专栏

博主看到老外模板效果后查看其源代码写了个demo，之后自己尝试制作直角三角形并给出代码，还思考制作等边三角形，了解到只要满足比例关系即可，同时查询资料得知边框是梯形而非直线或矩形。

改老外的模板是看到了这个效果

看其源代码写了个demo

完整代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
      div{
          width: 100px;
          min-height:50px;
          position:relative;
          background:#ff8a00;
      }
      div:before{
        position: absolute;
        left: 100%;
        top: 0;
        border-right: 50px solid transparent;
        border-bottom: 50px solid #ff8a00;
        content: "";
      }
    </style>
</head>
<body>
    <div>

    </div>
</body>
</html>

自己又尝试做了个直角三角形

代码如下

section{
        width: 0;
        border-right: 50px solid transparent;
        border-bottom: 50px solid #ff8a00;
      }

再想想能不能做个等边三角形，只要满足比例关系就行

 section{
        width: 0;
        border-right: 50px solid transparent;
        border-bottom: 86.6025405px solid #ff8a00;
        border-left: 50px solid transparent;
      }

网上查了下相关资料，边框不是直线也不是矩形，而是梯形