三角形

使用边框法画图形-技术中文网

通过border法可以画任意的三角形，通过调节边框的厚度来实现的。以下是代码

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/css.css">
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
    <div class="boxOne"></div>
</body>
</html>

css代码

.boxOne{
    width: 0;
    height: 0;
    margin: auto;
    border-top: 60px solid transparent;
    border-right: 60px solid transparent;
    border-bottom: 60px solid transparent;
    border-left: 60px solid yellowgreen;
}

五角星

使用边框法画图形-技术中文网

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/css.css">
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
    <div class="boxFour">
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>
</html>

css代码

.boxFour{
    width: 600px;
    height: 600px;
    position: absolute;
    top: 800px;
    left: 500px;
}
/* :nth-child()是伪类选择器 */
.boxFour div:nth-child(1){
    /* 使内容为0 */
    width: 0;
    height: 0;

    /* 设置边框 */
    /* transparent表示透明 */
    border-top: 50px solid transparent;
    border-right: 20px solid transparent;
    border-bottom: 50px solid red;
    border-left: 100px solid transparent;

    /* 动画 旋转 105度 */
    transform: rotate(105deg);

    /* 绝对定位 */
    position: absolute;
    left: 230px;
    top: 60px;
}
.boxFour div:nth-child(2){
    position: absolute;
    left: 170px;
    top: 60px;
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-right: 100px solid transparent;
    border-bottom: 50px solid red;
    border-left: 100px solid transparent;
    transform: rotate(35deg);
}
.boxFour div:nth-child(3){
    position: absolute;
    left: 145px;
    top: 60px;
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-right: 100px solid transparent;
    border-bottom: 50px solid red;
    border-left: 100px solid transparent;
    transform: rotate(-35deg);
}

以上就是用border法画出来的简易的图形。