纯css图形

最新推荐文章于 2021-10-26 15:32:54 发布

树欲静而风不止

最新推荐文章于 2021-10-26 15:32:54 发布

阅读量608

点赞数 1

分类专栏：前端基础

本文链接：https://blog.csdn.net/zjy660358/article/details/52261066

版权

前端基础专栏收录该内容

18 篇文章 0 订阅

订阅专栏

<style type="text/css">
	
		.div1{/* 三角形 */
			width: 0;
		    height: 0;
		    border-right: 80px solid transparent;
		    border-top: 100px solid #c59c53;
		}
		.div2{/* 梯形 */
			width:30px;
			border-top: 100px solid red;
			border-right: 80px solid transparent;
		}
		
		.div3{/* 圆形 */
			width:100px;
    		height: 100px;
    		background: #8BC34A;
    		border-radius:50%;
		}
		.div4{/* 椭圆形 */
			width:100px;
    		height: 80px;
    		background: #8BC34A;
    		border-radius:50%;
		}
		
		.div5{/* 半椭圆 */
			width:100px;
    		height: 80px;
    		background: #8BC34A;
    		border-radius:50% / 100% 100% 0 0;
		}
		.div6{/* 四分之一椭圆 */
			width:100px;
    		height: 80px;
    		background: #8BC34A;
    		border-radius:100% 0 0 0;
		}
		.div7{/* 平行四边形 */
			width:160px;
		    height: 80px;
		    margin-left:50px;
		    transform: skew(45deg);
			background: #8BC34A;
		}
		.div8{/* 菱形 */
			width:100px;
		    height: 100px;
		    margin-left:50px;
		    transform: rotate(45deg);
			background: #8BC34A;
		}
		.div9{/* 弧形切角 */
			background: #8BC34A;
		    background: radial-gradient(circle at top left, transparent 15px, #8BC34A 0) top left,
		                radial-gradient(circle at top right, transparent 15px, #8BC34A 0) top right,
		                radial-gradient(circle at bottom right, transparent 15px, #8BC34A 0) bottom right,
		                radial-gradient(circle at bottom left, transparent 15px, #8BC34A 0) bottom left;
		    background-size: 50% 50%;
		    background-repeat: no-repeat;
		    
		    width:100px;
		    height:100px;
		}
		.div10{
			width:140px;
		    height: 140px;
		    background: #8BC34A;
		    border-radius: 50%;
		    background-image: linear-gradient(to right,transparent 50%,#655 0);
		}
		.div10::before{
			content: '';
		    display: block;
		    margin-left: 50%;
		    height: 100%;
		    border-radius: 0 100% 100% 0 / 50%;
		    background-color: inherit;
		    transform-origin: left;
		    transform: rotate(.1turn);/*10%*/
		    transform: rotate(.2turn);/*20%*/
		    transform: rotate(.3turn);/*30%*/
		}
	</style>