学习笔记：纯css画图

最新推荐文章于 2024-06-18 10:00:00 发布

ZixiangLi

最新推荐文章于 2024-06-18 10:00:00 发布

阅读量958

点赞数

分类专栏： CSS 文章标签： css css3 图片

本文链接：https://blog.csdn.net/ZixiangLi/article/details/53366935

版权

CSS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
	<meta cahrset="utf-8">
<style>

.box1
{
	width: 0px;
	height: 0px;
	border: 20px solid black;
}


.box2
{
	width: 0px;
	height: 0px;
	border-bottom: 20px solid red;
	border-left: 20px solid transparent;	
}


.box3
{
	width: 100px;
	height: 0px;
	border-bottom: 100px solid red;
	border-left: 50px solid transparent;
	border-right: 50px solid transparent;
}


.box4
{
	 width: 150px; 
	 height: 100px; 
	 -webkit-transform: skew(-20deg);  /* 倾斜-20度*/
	 background: #669;
	 margin-left:20px;
}


.box5
{
	width: 100px;
	height: 100px;
	background-color: red;
	border-radius: 50px;      /* 设置圆角*/
}


.box6
{
	width: 100px;
	height: 100px;
	border:20px solid black;
	background:white;
	-webkit-border-radius: 100px;
}

.box7
{
	width: 100px;
	height: 0px;
	border:0px solid black;
	border-top: 100px solid red;
	border-right: 100px solid red;
	-webkit-border-radius:100px 100px 0 0;
}


.box8
{
	width: 100px;
	height: 0px;
	border:0px solid red;
	border-top: 100px solid red;
	-webkit-border-radius:100px 0 0 0;
}


.box9
{
	width: 200px;
	height: 100px;
	background: red;
	-webkit-border-radius:50%;
}


.box10
{
	border-bottom: 30px solid red;
	width: 100px;
	height: 100px;
	-webkit-border-radius:0 0 0 100px;
}


.box11
{
	width: 200px;
	height: 100px;
	background-color: red;
	-webkit-border-radius:20px;
	position: relative;
}
.box11:after               /*:after在元素后面添加内容*/
{
	content: "";
	border-bottom: 30px solid red;
	width: 50px;
	height: 50px;
	-webkit-border-radius:0 0 0 200px;
	position: relative;
	-webkit-transform:rotate(-90deg);        /*旋转-90度*/
	position: absolute;
	top: 60px;
}


.box12
{
	width: 250px;
	height: 100px;
	background-color: red;
	-webkit-border-radius:50px 0 0 50px;
	-webkit-transform:rotate(45deg);
	position: relative;
}


.box13
{
	width:160px;
	height: 200px;
	position: relative;
}
.box13:before
{
	content:" ";
	width: 80px;
	height: 120px;
	background-color: red;
	-webkit-border-radius:100px 100px 0 0;
	-webkit-transform:rotate(-45deg);
	position: absolute;
	left: 20px;
}
.box13:after
{
	content: " ";
	width: 80px;
	height: 120px;
	background-color: red;
	-webkit-border-radius:100px 100px 0 0;
	-webkit-transform:rotate(45deg);
	position: absolute;
	left: 50px;
}
</style>
</head>
	<h1>1</h1>
	<div class="box1"></div>    <!-- //正方形 -->
	<br>
	<h1>2</h1>
	<div class="box2"></div>	<!-- //直角三角形 -->
	<br>
	<h1>3</h1>
	<div class="box3"></div>	<!-- //等腰梯形 -->
	<br>
	<h1>4</h1>
	<div class="box4"></div>	<!-- //平行四边形 -->
	<br>
	<h1>5</h1>
	<div class="box5"></div>	<!-- //圆 -->
	<br>
	<h1>6</h1>
	<div class="box6"></div>	<!-- //同心圆 -->
	<br>
	<h1>7</h1>
	<div class="box7"></div>	<!-- //上半圆 -->
	<br>
	<h1>8</h1>
	<div class="box8"></div>	<!-- //下半圆 -->	
	<br>
	<h1>9</h1>
	<div class="box9"></div>	<!-- //椭圆 -->	
	<br>
	<h1>10</h1>
	<div class="box10"></div>	<!-- //小尾巴 -->	
	<br>
	<h1>11</h1>
	<div class="box11"></div>	<!-- //提示框 -->
	<br><br><br><br><br><br><br><br>
	<h1>12</h1>
	<div class="box12"></div>	<!-- //倾斜的胶囊 -->
	<br><br><br><br><br><br><br><br>
	<h1>13</h1>
	<div class="box13"></div>	<!-- //爱心 -->
</body>
</html>

ZixiangLi

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
学习笔记：纯css画图

.box1{ width: 0px; height: 0px; border: 20px solid black;}.box2{ width: 0px; height: 0px; border-bottom: 20px solid red; border-left: 20px solid transparent; }.box3{ width: 100px; heig
复制链接

扫一扫