html5+css代码画树，画太极！！！

2017年5月10日 1条评论

html5+css代码画树，画太极！！！

html5+css代码画树，画太极，你行吗？

看看代码吧

以下为全部代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>你可以吗？</title>
<style type="text/css">
	body{
        background: #aaa;
    }

    #t1,#t2,#t3,#tree{
        margin: 0 auto;
    }
    #t1{
        width: 0px; height: 0px;
        border-top: 10px solid transparent;
        border-bottom: 30px solid green;
        border-left: 30px solid transparent;
        border-right: 30px solid transparent;
    }
    #t2{
        width: 20px; height: 0px;
        border-top: 0px solid transparent;
        border-bottom: 50px solid green;
        border-left: 50px solid transparent;
        border-right: 50px solid transparent;
    }
    #t3{
        width: 40px; height: 0px;
        border-top: 0px solid transparent;
        border-bottom: 70px solid green;
        border-left: 70px solid transparent;
        border-right: 70px solid transparent;
    }
    #tree{
        width: 20px; height: 0px;
        border-top: 0px solid transparent;
        border-bottom: 50px solid #660000;/*树干改短一些*/
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
    }





	#t4{
		margin: 0px auto;
		background: red;
        width: 40px; height: 40px;
        border-top: 30px solid #ccc;
        border-bottom: 70px solid green;
        border-left: 40px solid #ddd;
        border-right: 80px solid #eee;
    }


    #t5{
        margin: 0 auto;
        width: 0px;
        height: 600px;
        border-left:300px solid white;
        border-right:300px solid black;
        border-radius: 600px;
    }
   #t5::before {
        content: '';
        display: block;
        width: 100px;
        height: 100px;
        border: 100px solid white;
        background: black;
        border-radius: 100%;
        margin-left: -150px;
    }

    #t5::after {
        content: '';
        display: block;
        width: 100px;
        height: 100px;
        border: 100px solid black;
        background: white;
        border-radius: 100%;
        margin-left: -150px;
    }

</style>

</head>
<body>
	<p style="text-align: center;color: green;font-weight: bold;font-size: 20px;">用CSS画一棵树</p>
	<div id="t1"></div>
	<div id="t2"></div>
	<div id="t3"></div>
	<div id="tree"></div>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<p style="text-align: center;font-weight: bold;font-style: italic;font-size: 20px;">眼睛看花了吗？</p>
	<div id="t4"></div>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
	<p style="text-align: center;font-weight: bold;font-size: 20px;">太极图</p>
    <div id="t5"></div>
</body>
</html>

Plugins by fishyoung.com

您阅读这篇文章共花了：