css实现三角形

作者: 李永州的FE | 来源:发表于2017-05-21 11:38 被阅读0次

css实现三角形
css 实现三角形箭头
css绘制三角形(border属性的使用)
CSS绘制三角形—border法
CSS实现空心三角形
2022css面试题总结
css实现三角形
使用css画一些矢量图
前端面试题(1)
css绘制三角形和对号

html

因为每个图形都有一些共同的样式，所以为每个div设置两个class,一个公共的class，一个各自的class

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>

        <div class="common box1"></div>
        <div class="common box2"></div> 
        <div class="common box3"></div>
        <div class="common box4"></div>
        <div class="common box5"></div>
        <div class="common box6"></div>
        <div class="common box7"></div>
     
</body>
</html>

css

.common{
            width: 0px;
            height: 0px;
            margin-top:50px;
        }
.box1{
            border-top: 50px blue solid;
            border-bottom: 50px green solid;
            border-right: 50px yellow solid;
            border-left: 50px red solid;

        }
.box2{
            border-top: 50px blue solid;
            border-bottom: 50px transparent solid;
            border-right: 50px transparent solid ;
            border-left: 50px transparent solid;
    }
 .box3{
            border-top: 50px transparent solid;
            border-bottom: 50px transparent solid;
            border-right: 50px transparent solid;
            border-left: 50px red solid;
     }
 .box4{
            border-top: 50px transparent solid;
            border-bottom: 50px transparent solid;
            border-right: 50px yellow solid;
            border-left: 50px transparent solid;
        }
  .box5{
            border-top: 50px transparent solid;
            border-bottom: 50px green solid;
            border-right: 50px transparent solid;
            border-left: 50px transparent solid;
        }
  .box6{
            border-top: 50px transparent solid;
            border-bottom: 50px red solid;
            border-right: 50px transparent solid;
            border-left: 50px red solid;

        }
  .box7{
            border-top: 50px transparent solid;
            border-bottom: 50px green solid;
            border-right: 50px green solid;
            border-left: 50px transparent solid;
        }

QQ图片20170521113731.png