CSS绘制常见的三角形

最新推荐文章于 2024-06-19 14:48:22 发布

颜洁

最新推荐文章于 2024-06-19 14:48:22 发布

阅读量365

点赞数

分类专栏： css知识杂货铺

本文链接：https://blog.csdn.net/amytun_yu/article/details/62215632

版权

css知识杂货铺专栏收录该内容

3 篇文章 0 订阅

订阅专栏

给css的世界添点料：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>css绘制三角形</title>
        <style type="text/css">
            div{
                float: left;
            }
            .sj1{
                /*向上的三角形*/
                font-size:26px;
                color: #000000;
                width: 0;
                height: 0;
                border-left: 125px solid transparent;
                border-right: 125px solid transparent;
                border-bottom: 250px solid #00CED1;
            }
            .sj2{
                /*down*/
                /*向下的三角形*/
                font-size: 26px;
                color: #000000;
                width: 0;
                height: 0;
                border-left: 125px solid transparent;
                border-right: 125px solid transparent;
                border-top: 250px solid lightcoral;
            }
            .sj3{
                /*left*/
                /*向左的三角形*/
                font-size: 26px;
                color: #000000;
                width: 0;
                height: 0;
                border-top:125px solid transparent;
                border-right: 250px solid mediumturquoise;
                border-bottom: 125px solid transparent;
            }
            .sj4{
                /*right*/
                /*向右的三角形*/
                font-size: 26px;
                color: #000000;
                width: 0;
                height: 0;
                border-top:125px solid transparent;
                border-left: 250px solid mistyrose;
                border-bottom: 125px solid transparent;
            }
            .sj5{
                /*left top*/
                /*左上角的三角形*/
                font-size: 26px;
                color: #000000;
                width: 0;
                height: 0;
                border-top: 250px solid red;
                border-right: 250px solid transparent;
            }
            .sj6{
                /*bottom right*/
                /*右下角的三角形*/
                font-size: 26px;
                color: #000000;
                width: 0;
                height: 0;
                border-bottom: 250px dashed deepskyblue;
                border-left: 250px solid transparent;
            }
            div:hover{
                cursor: pointer;
                transform: rotate(720deg);
                transition: 5s;
            }
        </style>
    </head>
    <body>

        <!--常见三角形的绘制-->
        <div class="sj1">
            up
        </div>
        <div class="sj2">
            down
        </div>
        <div class="sj3">
            left
        </div>
        <div class="sj4">
            right
        </div>
        <div class="sj5">
            top left
        </div>
        <div class="sj6">
            bottom right
        </div>
    </body>
</html>