使用transform以及border实现多彩组合正方形_rotate transform border-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_45614713/article/details/108545538

使用transform以及border实现多彩组合正方形

1


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>正方形1</title>
    <style>
        #l_f{
            top:100px;
            left:100px;
            margin: 50px 0;
            position: relative;
            display: block;
            width: 0px;
            height: 0px;
            border-left: 50px solid yellow;
            border-top: 50px solid royalblue;
            border-right: 50px solid white;
            border-bottom:50px solid black ;
            transform: rotate(45deg);

        }
        #l_f:before{
            position: absolute;
            display: block;
            content: " ";
            width: 0;
            height: 0;
            top:50px;
            left: -50px;
            border-left:50px solid transparent;
            border-top:50px solid purple;
            border-right:50px solid transparent;
            border-bottom:50px solid transparent;
        }
        #l_f:after{
            position: absolute;
            display: block;
            content: " ";
            width: 0;
            height: 0;
            left: 50px;
            top:-50px;
            border-left:50px solid dodgerblue;
            border-top:50px solid transparent;
            border-right:50px solid transparent;
            border-bottom:50px solid transparent;
        }
        #l_t{
            width: 0;
            height: 0;
            border-left:50px solid transparent;
            border-top:50px solid transparent;
            border-right:50px solid limegreen;
            border-bottom:50px solid transparent;
            transform:rotate(45deg) translate(-65px,-106px);
        }
        #r_t{
            width: 0;
            height: 0;
            border-left:50px solid transparent;
            border-top:50px solid transparent;
            border-right:50px solid transparent;
            border-bottom:50px solid red;
            transform:rotate(45deg) translate(-36px,-276px);
        }
    </style>
</head>
<body>
<!--transform 和伪元素 ::before /after -->
<div>
    <div id="l_f"></div>
    <div id="l_t"></div>
    <div id="r_t"></div>
</div>
</body>
</html>

在这里插入图片描述

2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>五角星</title>
    <style>
        #l_b {
            width: 0;
            height: 0;
            border-left: 25px solid purple;
            border-top: 25px solid purple;
            border-right: 25px solid darkblue;
            border-bottom: 25px solid darkblue;
            transform: translate(0px, -50px);
        }

        #r_b {
            width: 0;
            height: 0;
            border-left: 25px solid dodgerblue;
            border-top: 25px solid darkorange;
            border-right: 25px solid darkorange;
            border-bottom: 25px solid dodgerblue;
            transform: translate(50px, -100px);
        }

        #l_t {
            width: 0;
            height: 0;
            border-left: 25px solid limegreen;
            border-top: 25px solid red;
            border-right: 25px solid red;
            border-bottom: 25px solid limegreen;
        }

        #r_t {
            width: 0;
            height: 0;
            border-left: 25px solid darkslategray;
            border-top: 25px solid darkslategray;
            border-right: 25px solid yellow;
            border-bottom: 25px solid yellow;
            transform: translate(50px, -50px);
        }
    </style>
</head>
<body>
<!--transform -->
<div>
    <div id="l_t"></div>
    <div id="r_t"></div>
    <div id="l_b"></div>
    <div id="r_b"></div>
</div>
</body>
</html>

在这里插入图片描述