master

分支 (1)

管理

管理

master

h5-c3
/
radius画特殊图形.html

<!DOCTYPE html>
<html lang="zh">
	<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>画特色圆</title>
		<style>
			.main {
				width: 100%;
				box-sizing: border-box;
				padding: 0 6.25rem;
				display: grid;
				grid-template-columns: 18.5rem 18.75rem 12rem;
				row-gap: 1rem;
				background-color: #bfa;

			}

			.circle1 {
				width: 12.5rem;
				height: 12.5rem;
				background-color: #a72525;
				-webkit-border-radius: 100px;
			}

			.circle2 {
				width: 12.5rem;
				height: 12.5rem;
				background-color: #efefef;
				/* Can be set to transparent */
				border: 3px #a72525 solid;
				-webkit-border-radius: 100px;
			}

			.circle3 {
				width: 0px;
				height: 0px;
				border-width: 90px;
				border-style: solid;
				border-color: yellow;
				border-right-color: transparent;
				border-radius: 90px;
			}

			.circle4 {
				width: 40px;
				height: 40px;
				border: 70px solid red;
				border-radius: 60px;
			}

			.circle5 {
				width: 180px;
				height: 90px;
				border-bottom-width: 90px;
				border-bottom-color: black;
				border-bottom-style: solid;
				background-color: #eee;
				border-radius: 90px;
				position: relative;
			}

			.circle5::before,
			.circle5::after {
				content: '';
				position: absolute;
				top: 50%;
				width: 20px;
				height: 20px;
				border-width: 35px;
				border-style: solid;
				border-radius: 45px;
			}

			.circle5::before {
				border-color: black;
				background-color: #eee;
			}

			.circle5::after {
				right: 0;
				border-color: #eee;
				background-color: black;
			}

			.circle6 {
				width: 45px;
				height: 90px;
				border-radius: 45px 0 0 0 / 90px 0 0 0;
				background-color: red;
			}
			.circle7 {
				width: 0;
				height: 0;
				border-left: 50px solid transparent;
				border-right: 50px solid transparent;
				border-bottom: 100px solid #669;
				position:relative;
				margin-bottom:50px
			}
			.circle7:after {
			content:" ";
			width: 0;
			height: 0;
			border-left: 50px solid transparent;
			border-right: 50px solid transparent;
			border-top: 100px solid #669;
			position:absolute;
			top:50px;
			left:-50px;}
		</style>
	</head>
	<body>
		<div class="main">
			<div class="circle1"></div>
			<div class="circle2"></div>
			<div class="circle3"></div>
			<div class="circle4"></div>
			<div class="circle5"></div>
			<div class="circle6"></div>
			<div class="circle7"></div>
			<div class="circle8"></div>
		</div>
	</body>
</html>