css画三角形

作者: 前端来入坑 | 来源:发表于2018-12-24 19:46 被阅读144次

CSS画三角形、圆形、椭圆形总结
css 实现三角形箭头
【转】用CSS画各种形状(一)
css3开发商务滑动垂直侧边栏
css画三角形
CSS画三角形的简单做法
css绘制三角形和对号
css 画三角形
CSS画三角形/梯形
css-三角形

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS三角形</title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            border: 10px solid #666;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

这个很明显，呈现的是border为10px的一个正方形

Square-正方形

改变正方形的颜色，box的样式

      .box {
            width: 100px;
            height: 100px;
            border: 10px solid #666;
            border-left-color:red;
            border-right-color:orange;
            border-bottom-color:skyblue;
            border-top-color:pink;
        }

Square

改变box宽高为0，增加border宽度

    .box {
            width: 0px;
            height: 0px;
            border: 100px solid #666;
            border-left-color:red;
            border-right-color:orange;
            border-bottom-color:skyblue;
            border-top-color:pink;
        }

Eight triangles
变成了四种颜色的三角形，那么用transparent让上，右，左边的三角形边透明不就出现了我们想要的三角形了。

     .box {
            width: 0px;
            height: 0px;
            border: 100px solid #666;
            border-left-color:transparent;
            border-right-color:transparent;
            border-bottom-color:skyblue;
            border-top-color:transparent;
        }