html+css实现各种图形

[微信紅包]恭喜发財，大吉大利！

已于 2022-11-09 12:15:38 修改

阅读量230

点赞数

分类专栏： HTML+CSS 文章标签： html css 前端

于 2022-05-08 12:29:37 首次发布

本文链接：https://blog.csdn.net/weixin_68548138/article/details/124645986

版权

HTML+CSS 专栏收录该内容

11 篇文章 2 订阅

订阅专栏

1.带边框正方形

<head>
    <style>
        *{margin:10px;}
        #zhengFangXing{
            border:5px solid blue; 
            width:150px;
            height:150px;
            background-color:red;
            float:left;
        }
    </style>
</head>
<body>
    <div id="zhengFangXing"></div>
</body>

2.带边框长方形

<head>
    <style>
        #changFangXing{
		    border:5px solid blue; 
		    width:150px;
		    height:100px;
		    background-color:red;
	    	float:left;
    	}
    </style>
</head>
<body>
    <div id="changFangXing"></div>
</body>

3.组合图形

<head>
    <style>
        #testXing{
		    border-left:80px solid yellow; 
		    border-bottom:80px solid blue;
		    border-right:80px solid purple;  
		    border-top:80px solid pink; 
		    width:50px;
		    height:50px;
		    background-color:red;
		    float:left;
	    }
    </style>
</head>
<body>
    <div id="testXing"></div>
</body>

4.梯形

<head>
    <style>
        #tiXing1{
		    border-left:80px solid transparent; 
	    	border-bottom:80px solid blue;
	    	border-right:80px solid transparent;  
	    	width:50px;
	    	float:left;
    	}
    </style>
</head>
<body>
    <div id="tiXing1"></div>
</body>

5.梯形

<head>
    <style>
       	#tiXing2{
	    	border-left:80px solid transparent; 
	    	border-top:80px solid blue;
	    	border-right:80px solid transparent;  
	    	width:50px;
	    	float:left;
    	}
    </style>
</head>
<body>
    <div id="tiXing2"></div>
</body>

6.三角形

<head>
    <style>
        #sanJiaoXing{
	    	border-left:80px solid transparent; 
    		border-top:80px solid blue;
    		border-right:80px solid transparent;  
    		width:1px;
	    	float:left;
	    }
    </style>
</head>
<body>
    <div id="sanJiaoXing"></div>
</body>

7.圆形

<head>
    <style>
        #yuanXing{
            width:100px;
            height:100px;
            border:5px solid #ccc;
            border-radius:50%;
            float:left;
            background-color:red;
        }
    </style>
</head>
<body>
    <div id="yuanXing"></div>
</body>

8.半圆形

<head>
    <style>
        #banYuanXing{
            width:100px;
            height:50px;
            border:5px solid #ccc;
            border-radius: 50px 50px 0 0;
            float:left;
            background-color:red;
        }
    </style>
</head>
<body>
    <div id="banYuanXing"></div>
</body>

9.扇形

<head>
    <style>
        #shanXing1{
            width:100px;
            height:100px;
            border:5px solid #ccc;
            border-radius:  100px 0 0 0;
            float:left;
            background-color:red;
        }
    </style>
</head>
<body>
    <div id="shanXing"></div>
</body>