css绘制梯形、直角三角形

最新推荐文章于 2024-07-11 15:39:54 发布

Yabeei

最新推荐文章于 2024-07-11 15:39:54 发布

阅读量1.9k

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/namefhf/article/details/88635848

版权

css 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

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

看其源代码写了个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;
      }

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

Yabeei

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
css绘制梯形、直角三角形

改老外的模板是看到了这个效果看其源代码写了个demo完整代码如下：&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device
复制链接

扫一扫