利用CSS实现特殊图形

沐小侠

已于 2022-09-26 16:17:20 修改

阅读量1.0k

点赞数 1

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

于 2022-09-26 16:16:52 首次发布

本文链接：https://blog.csdn.net/weixin_41092938/article/details/127055633

版权

HTML+CSS+JS 专栏收录该内容

17 篇文章 1 订阅

订阅专栏

利用CSS3的border-radius属性实现特殊图形。效果图如下：
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf‐8">
	<title>特殊图形</title>
	<style>
		div {
		width: 200px;
		height: 200px;
		background: red;
		border: 1px solid red;
		margin: 10px 40px;
		float: left;
		}
		div:first-child {
		border-radius: 20px/50px;
		}
		div:nth-child(2) {
		border-radius: 20px;
		}
		div:nth-child(3) {
		border-radius: 15px 0;
		}

		/* 圆形 */
		div:nth-child(4) {
		border-radius: 50%;
		}
		div:nth-child(5) {
		border-radius: 100px 0;
		}
		/* 扇形 */
		div:nth-child(6) {
		border-radius: 200px 0 0 0;
		}
		/* 半圆 */
		div:nth-child(7) {
		border-radius: 100px 100px 0 0;
		height: 100px;/*高度减半*/
		}
		/* 半圆 */
		div:nth-child(8) {
		border-radius: 0 0 100px 100px;
		height: 100px;/*高度减半*/
		}
		/* 椭圆距形 */
		div:nth-child(9) {
		border-radius: 100px;
		height: 100px;
		}
		/* 椭圆形 */
		div:nth-child(10) {
		border-radius: 100%;
		height: 100px;
		}
	</style>
	</head>
	<body>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
	</body>
</html>