用css实现三角形

图片

1

图片.png

代码：

<style>
.triangle{
width: 0;
border-top: 30px solid blue;
border-right: 30px solid yellow;
border-bottom: 30px solid green;
border-left: 30px solid red;
}
</style>
<body>
<div class="triangle"></div>
</body>

2

图片.png

代码：

<style>
.triangle{
width: 0;
border-top: 30px solid blue;
border-right: 30px solid transparent;
border-bottom: 30px solid transparent;
border-left: 30px solid transparent;
}
</style>
<body>
<div class="triangle"></div>
</body>

3

图片.png

代码：

   <style>
        .triangle{
            width: 0;
            border-top: 30px solid transparent;
            border-right: 30px solid transparent;
            border-bottom: 30px solid transparent;
            border-left: 30px solid red;
        }
   </style>
   <body>
      <div class="triangle"></div>
   </body>

4

图片.png

代码：

<style>
        .triangle{
            width: 0;
            border-top: 30px solid transparent;
            border-right: 30px solid yellow;
            border-bottom: 30px solid transparent;
            border-left: 30px solid transparent;
        }
</style>
<body>
    <div class="triangle"></div>
</body>

同样的以此类推

5

图片.png

代码：

 <style>
        .triangle{
            width: 0;
            border-top: 30px solid transparent;
            border-right: 30px solid transparent;
            border-bottom: 30px solid red;
            border-left: 30px solid red;
        }
 </style>
 <body>
    <div class="triangle"></div>
 </body>

注意：

1，可以使用span这样的行内元素设置border ，设置span为绝对定位，父包含块为相对定位，就可以不用为span添加宽度，也可以不用非要使用块级元素。

2，要显示某个边框时，他对应边框可以不用设置

例子：

图片.png

当只给span设置border时，只有下边框可以正常显示为一个三角形

图片.png

案例

一，span行内元素设置border(代码更简洁优雅)

图片.png

代码

图片.png

法一：通过两个三角形块遮盖代码
法二：通过旋转正方形（带边框），利用它的一个角

二，div块级元素设置border

1，

图片.png

代码

2，

图片.png

代码

3，

图片.png

代码

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容