css实现的简单图形

最新推荐文章于 2023-03-28 20:29:58 发布

衍道

最新推荐文章于 2023-03-28 20:29:58 发布

阅读量230

点赞数

分类专栏： web

本文链接：https://blog.csdn.net/swqdzz/article/details/104714260

版权

web 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

css实现的简单图形

一、图形

在这里插入图片描述

备注：代码和图形顺序一一对应

二、代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>css实现形状</title>
		<style>
			.square {
				display: inline-block;
				width: 100px;
				height: 100px;
				line-height: 100px;
				text-align: center;
				background-color: red;
			}

			.circle {
				display: inline-block;
				width: 100px;
				height: 100px;
				line-height: 100px;
				text-align: center;
				border-radius: 50%;
				background-color: red;
			}

			.oval {
				display: inline-block;
				width: 200px;
				height: 100px;
				background-color: red;
				line-height: 100px;
				text-align: center;
				border-radius: 200px/100px;

			}

			.triangle-up {
				display: inline-block;
				width: 0px;
				height: 0px;
				border-right: 50px solid transparent;
				border-left: 50px solid transparent;
				border-bottom: 100px solid red;
			}

			.box-square {
				display: inline-block;
				width: 0px;
				height: 0px;
				border-right: 50px solid red;
				border-left: 50px solid black;
				border-bottom: 50px solid blue;
				border-top: 50px solid green;
			}

			.triangle-left {
				display: inline-block;
				width: 0px;
				height: 0px;
				border-top: 100px solid red;
				border-right: 100px solid transparent;

			}

			.curvedarrow {
				margin-left: 100px;
				position: relative;
				display: inline-block;
				width: 0px;
				height: 0px;
				border-bottom: 50px solid red;
				border-left: 50px solid transparent;
				transform: rotateZ(10deg);
			}

			.curvedarrow::after {
				position: absolute;
				content: '';
				width: 80px;
				height: 80px;
				border-top: 20px solid red;
				border-radius: 80px 0px 0px 0px;
				top: -23px;
				left: -118px;
				transform: rotateZ(45deg);
			}

			.parallelogram {
				display: inline-block;
				width: 100px;
				height: 100px;
				transform: skew(10deg);
				background-color: red;
			}

			.trapezoid {
				display: inline-block;
				width: 50px;
				height: 0px;
				border-bottom: 100px solid red;
				border-left: 25px solid transparent;
				border-right: 25px solid transparent;
			}

			.star-six {
				position: relative;
				width: 0;
				height: 0;
				display: inline-block;
				border-left: 50px solid transparent;
				border-right: 50px solid transparent;
				border-bottom: 100px solid red;
			}
			.star-six::before
			{
				position: absolute;
				
				content: '';
				border-left: 50px solid transparent;
				border-right: 50px solid transparent;
				border-top: 100px solid red;
				width: 0;
				height: 0;
				left: -50px;
				top: 30px;
			}
			.moon
			{
				display: inline-block;
				width: 100px;
				height: 100px;
				border-radius: 50%;
				box-shadow: 20px 20px 0px 0px red;
			}
			.magnifying-glass
			{
				display: inline-block;
				margin: 20px;
				width: 50px;
				height: 50px;
				position: relative;
				border: 10px solid red;
				border-radius: 50%;
			}
			.magnifying-glass::before
			{
				position: absolute;
				content: '';
				width: 30px;
				height: 10px;
				background-color: red;
				transform: rotateZ(35deg);
				left:50px;
				top: 48px;
			}
			.egg
			{
				display: inline-block;
				width: 100px;
				height: 100px;
				background-color: red;
				border-radius: 50% 50% 50% 50%/60% 60% 40% 40%;
			}
			.zui
			{
				display: inline-block;
				position: relative;
				width: 100px;
				height: 100px;
			}
			.zui::before,.zui::after{
				position: absolute;
				content: '';
				width: 60px;
				height: 80px;
				background-color: red;
				border-radius: 50% 0 0 50%;
				transform: rotateZ(45deg);
				transform-origin:100% 100%;
			}
			.zui::after
			{
				position: absolute;
				transform: rotateZ(135deg);
				transform-origin:100% 100%;
				top: -56px;
				left: -56px;
		
			}
			.heart
			{
				position: relative;
				display: inline-block;
				margin: 50px;
				width: 100px;
				height: 100px;
			}
			.heart::after,.heart::before
			{
				position: absolute;
				content: '';
				width: 50px;
				height: 80px;
				background-color: red;
				border-radius: 50% 50% 0 0;
				transform: rotateZ(-45deg);
				transform-origin: 0 100%;
			}
			.heart::after{
				transform: rotateZ(45deg);
				left: -49px;
				transform-origin: 100% 100%;
			}
		</style>
	</head>

	<body>
		<div class="box">
			<div class="square">
				<span>正方形</span>
			</div>
			<div class="circle">
				<span>圆</span>
			</div>
			<div class="oval">
				<span>椭圆</span>
			</div>
			<div class="triangle-up">
				<span>三角形</span>
			</div>
			<div class="box-square"></div>
			<div class="triangle-left"></div>
			<div class="curvedarrow"></div>
			<div class="parallelogram"></div>
			<div class="trapezoid"></div>
			<div class="star-six"></div>
			<div class="moon"></div>
			<div class="magnifying-glass"></div>
			<div class="egg"></div>
			<div class="zui"></div>
			<div class="heart"></div>
		</div>
	</body>
</html>