关于前端:css实现三角形

4次阅读

共计 796 个字符，预计需要花费 2 分钟才能阅读完成。

例 1

例 2

例 3

认真想想，原理非常简单，利用 CSS 的 border 以及它的属性值 transparent 来实现三角形, 其中最次要的是要明确因为 div 的高度跟宽度都为 0，margin，padding 也为 0，所以元素框的大小就是他的 border 的叠加，因为相邻 border 会重叠，故存在内容宽高时其实任意一边存在的 border 都是梯形的，当 div 内容宽高为 0 时，border 就体现为三角形，将四个 border 的色彩设置为 transparent 示意边框通明，而将左边框色彩再设置为红色就发现三角形呈现了，其实这个三角形是你设置色彩的边框。

<style>
    div {
        width: 0;
        height: 0;
        border-top: 40px solid transparent;
        border-left: 40px solid transparent;
        border-right: 40px solid transparent;
        border-bottom: 40px solid #ff0000;
    }
    </style>
</head>
<body>
  <div></div>
</body>

如果想要不同方向的三角形，只须要扭转所需的边框色彩，另外三条边改为 transparent(通明)。那么咱们就能很简略的实现例 1 和例 3 的成果

<style>
        div{
            width: 0px;
            height: 0px;
            border-width: 0px 0px 200px 100px;
            border-style: solid;
            border-bottom-color:green ;
            border-left-color:transparent;
        }
</style>
</head>
<body>
  <div></div>
</body>

正文完