CSS画基本图形

最新推荐文章于 2021-11-29 17:17:09 发布
最新推荐文章于 2021-11-29 17:17:09 发布
阅读量145 收藏 1
点赞数
分类专栏： Web FrontEnd CSS 文章标签： css 图形 css3 css 基本图形 三角形 边形
_格鲁特宝宝原创，转载请务必注明出处
本文链接：https://blog.csdn.net/GrootBaby/article/details/84107540
版权 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS 画基本图形</title>
<style type="text/css">
* {
	color: #fff;
}
div {
	margin: 0 auto;
	margin-top: 20px;
	margin-bottom: 20px;
	text-align: center;
}
span {
	display: inline-block;
	line-height: 100px;
}

/* 圆 */
#circle { 
	width: 100px; 
	height: 100px; 
	background: rgba(0, 0, 0, .8); 
	border-radius: 50px; 
	-o-border-radius: 50px; 
	-moz-border-radius: 50px; 
	-webkit-border-radius: 50px; 
} 
/* 椭圆 */
#oval { 
	width: 200px; 
	height: 100px; 
	background: rgba(0, 0, 0, .8); 
	border-radius: 100px / 50px; 
	-o-border-radius: 100px / 50px; 
	-moz-border-radius: 100px / 50px; 
	-webkit-border-radius: 100px / 50px; 
} 
/* 上三角 */
#triangle-up { 
	width: 0; 
	height: 0; 
	border-left: 50px solid transparent; 
	border-right: 50px solid transparent; 
	border-bottom: 100px solid rgba(0, 0, 0, .8); 
}
/* 下三角 */
#triangle-down { 
	width: 0; 
	height: 0; 
	border-left: 50px solid transparent; 
	border-right: 50px solid transparent; 
	border-top: 100px solid rgba(0, 0, 0, .8); 
}
/* 左三角 */
#triangle-left { 
	width: 0; 
	height: 0; 
	border-top: 50px solid transparent; 
	border-bottom: 50px solid transparent; 
	border-right: 100px solid rgba(0, 0, 0, .8); 
}
/* 右三角 */
#triangle-right { 
	width: 0; 
	height: 0; 
	border-top: 50px solid transparent; 
	border-bottom: 50px solid transparent; 
	border-left: 100px solid rgba(0, 0, 0, .8); 
}
/* 左上三角 */
#triangle-topleft { 
	width: 0; 
	height: 0; 
	border-top: 100px solid rgba(0, 0, 0, .8);
	border-right: 100px solid transparent; 
} 
/* 右上三角 */
#triangle-topright { 
	width: 0; 
	height: 0; 
	border-top: 100px solid rgba(0, 0, 0, .8);
	border-left: 100px solid transparent; 
} 
/* 左下三角 */
#triangle-bottomleft { 
	width: 0; 
	height: 0; 
	border-bottom: 100px solid rgba(0, 0, 0, .8);
	border-right: 100px solid transparent; 
} 
/* 右下三角 */
#triangle-bottomright { 
	width: 0; 
	height: 0; 
	border-bottom: 100px solid rgba(0, 0, 0, .8);
	border-left: 100px solid transparent; 
} 
/* 平行四边形 */
#parallelogram {
	width: 150px; 
	height: 100px; 
	margin-right: 20px;
	background: rgba(0, 0, 0, .8);
	-o-transform: skew(-20deg); 
	-moz-transform: skew(-20deg); 
	-webkit-transform: skew(-20deg); 
}
/* 梯形 */
#trapezoid {
	width: 100px; 
	height: 0; 
	border-bottom: 100px solid rgba(0, 0, 0, .8);
	border-left: 50px solid transparent; 
	border-right: 50px solid transparent; 
}
/* 五边形 */
#pentagon { 
	position: relative; 
	width: 54px; 
	border-width: 50px 18px 0; /* 梯形 */
	border-style: solid; 
	border-color: rgba(0, 0, 0, .8) transparent; 
	margin-top: 40px;
} 
#pentagon:before { 
	content: ""; 
	position: absolute; 
	height: 0; 
	width: 0; 
	top: -85px; 
	left: -18px; 
	border-width: 0 45px 35px; /* 上三角 */
	border-style: solid; 
	border-color: transparent transparent rgba(0, 0, 0, .8);
} 
/* 六边形 */
#hexagon { 
	width: 100px; 
	height: 55px; 
	background: rgba(0, 0, 0, .8);
	position: relative; 
	margin-left: 20px;
} 
#hexagon:before { 
	content: ""; 
	position: absolute; 
	top: -25px; 
	left: 0; 
	width: 0; 
	height: 0; 
	border-left: 50px solid transparent; 
	border-right: 50px solid transparent; 
	border-bottom: 25px solid rgba(0, 0, 0, .8);
} 
#hexagon:after { 
	content: ""; 
	position: absolute; 
	bottom: -25px; 
	left: 0; 
	width: 0; 
	height: 0; 
	border-left: 50px solid transparent; 
	border-right: 50px solid transparent; 
	border-top: 25px solid rgba(0, 0, 0, .8);
} 
/* 八角形 */
#octagon { 
	width: 100px; 
	height: 100px;
	background: rgba(0, 0, 0, .8); 
	position: relative; 
	margin-left: 20px;
} 
#octagon:before { 
	content: ""; 
	position: absolute; 
	top: 0; 
	left: 0; 
	border-bottom: 12px solid rgba(0, 0, 0, 0); 
	border-left: 12px solid #fff; 
	border-right: 12px solid #fff; 
	width: 76px; 
	height: 0; 
} 
#octagon:after { 
	content: ""; 
	position: absolute; 
	bottom: 0; 
	left: 0; 
	border-top: 12px solid rgba(0, 0, 0, 0); 
	border-left: 12px solid #fff; 
	border-right: 12px solid #fff; 
	width: 76px; 
	height: 0; 
}

/* 五角星 */
#star-five { 
	margin: 50px 0; 
	position: relative; 
	color: rgba(0, 0, 0, .8);
	width: 0px; 
	height: 0px; 
	border-right: 100px solid transparent; 
	border-bottom: 70px solid rgba(0, 0, 0, .8);
	border-left: 100px solid transparent; 
	-moz-transform: rotate(35deg); 
	-webkit-transform: rotate(35deg); 
	-ms-transform: rotate(35deg); 
	-o-transform: rotate(35deg); 
	} 
#star-five:before { 
	border-bottom: 80px solid rgba(0, 0, 0, .8);
	border-left: 30px solid transparent; 
	border-right: 30px solid transparent; 
	position: absolute; 
	height: 0; 
	width: 0; 
	top: -44px; 
	left: -61px; 
	display: block; 
	content: ''; 
	-webkit-transform: rotate(-35deg); 
	-moz-transform: rotate(-35deg); 
	-ms-transform: rotate(-35deg); 
	-o-transform: rotate(-35deg); 
} 
#star-five:after { 
	position: absolute; 
	display: block; 
	color: rgba(0, 0, 0, .8);
	top: 3px; 
	left: -105px; 
	width: 0px; 
	height: 0px; 
	border-right: 100px solid transparent; 
	border-bottom: 70px solid rgba(0, 0, 0, .8);
	border-left: 100px solid transparent; 
	-webkit-transform: rotate(-70deg); 
	-moz-transform: rotate(-70deg); 
	-ms-transform: rotate(-70deg); 
	-o-transform: rotate(-70deg); 
	content: ''; 
} 
/* 六角形 */
#star-six { 
	width: 0; 
	height: 0; 
	border-left: 50px solid transparent; 
	border-right: 50px solid transparent; 
	border-bottom: 100px solid rgba(0, 0, 0, .8);
	position: relative; 
} 
#star-six:after { 
	width: 0; 
	height: 0; 
	border-left: 50px solid transparent; 
	border-right: 50px solid transparent; 
	border-top: 100px solid rgba(0, 0, 0, .8);
	position: absolute; 
	content: ""; 
	top: 30px; 
	left: -50px; 
} 
/* 8角星 */
#burst-8 { 
	margin-left: 20px;
	width: 80px; 
	height: 80px; 
	background: rgba(0, 0, 0, .8);
	position: relative; 
	text-align: center; 
	-webkit-transform: rotate(20deg); 
	-moz-transform: rotate(20deg); 
	-ms-transform: rotate(20deg); 
	-o-transform: rotate(20deg); 
	transform: rotate(20deg); 
} 
#burst-8:before { 
	content: ""; 
	position: absolute; 
	top: 0; 
	left: 0; 
	height: 80px; 
	width: 80px; 
	background: rgba(0, 0, 0, .8);
	-webkit-transform: rotate(135deg); 
	-moz-transform: rotate(135deg); 
	-ms-transform: rotate(135deg); 
	-o-transform: rotate(135deg); 
	transform: rotate(135deg); 
} 
/* 12角星 */
#burst-12 { 
	margin-left: 40px;
	width: 80px; 
	height: 80px; 
	background: rgba(0, 0, 0, .8);
	position: relative; 
	text-align: center; 
} 
#burst-12:before,
#burst-12:after { 
	content: ""; 
	position: absolute; 
	top: 0; 
	left: 0; 
	height: 80px; 
	width: 80px; 
	background: rgba(0, 0, 0, .8);
} 
#burst-12:before { 
	-webkit-transform: rotate(30deg); 
	-moz-transform: rotate(30deg); 
	-ms-transform: rotate(30deg); 
	-o-transform: rotate(30deg); 
	transform: rotate(30deg); 
} 
#burst-12:after { 
	-webkit-transform: rotate(60deg); 
	-moz-transform: rotate(60deg); 
	-ms-transform: rotate(60deg); 
	-o-transform: rotate(60deg); 
	transform: rotate(60deg); 
} 

/* 钻石 */
#cut-diamond { 
	border-style: solid; 
	border-color: transparent transparent rgba(0, 0, 0, .8) transparent; 
	border-width: 0 25px 25px 25px; 
	height: 0; 
	width: 50px; 
	position: relative; 
	margin: 10px 0 80px 0; 
} 
#cut-diamond:after { 
	content: ""; 
	position: absolute; 
	top: 25px; 
	left: -25px; 
	width: 0; 
	height: 0; 
	border-style: solid; 
	border-color: rgba(0, 0, 0, .8) transparent transparent transparent; 
	border-width: 70px 50px 0 50px; 
} 
/* 心形 */
#heart { 
	position: relative; 
	width: 100px; 
	height: 90px; 
} 
#heart:before, 
#heart:after { 
	position: absolute; 
	content: ""; 
	left: 50px; 
	top: 0; 
	width: 50px; 
	height: 80px; 
	background: rgba(0, 0, 0, 1);
	-moz-border-radius: 50px 50px 0 0; 
	border-radius: 50px 50px 0 0; 
	-webkit-transform: rotate(-45deg); 
	-moz-transform: rotate(-45deg); 
	-ms-transform: rotate(-45deg); 
	-o-transform: rotate(-45deg); 
	transform: rotate(-45deg); 
	-webkit-transform-origin: 0 100%; 
	-moz-transform-origin: 0 100%; 
	-ms-transform-origin: 0 100%; 
	-o-transform-origin: 0 100%; 
	transform-origin: 0 100%; 
} 
#heart:after { 
	left: 0; 
	-webkit-transform: rotate(45deg); 
	-moz-transform: rotate(45deg); 
	-ms-transform: rotate(45deg); 
	-o-transform: rotate(45deg); 
	transform: rotate(45deg); 
	-webkit-transform-origin: 100% 100%; 
	-moz-transform-origin: 100% 100%; 
	-ms-transform-origin: 100% 100%; 
	-o-transform-origin: 100% 100%; 
	transform-origin :100% 100%; 
} 
/* 无穷大符号 */
#infinity { 
	position: relative; 
	width: 185px; 
	height: 100px; 
} 
#infinity:before, 
#infinity:after { 
	content: ""; 
	position: absolute; 
	top: 0; 
	left: 0; 
	width: 60px; 
	height: 60px; 
	border: 12px solid rgba(0, 0, 0, 1);
	-moz-border-radius: 50px 50px 0 50px; 
	border-radius: 50px 50px 0 50px; 
	-webkit-transform: rotate(-45deg); 
	-moz-transform: rotate(-45deg); 
	-ms-transform: rotate(-45deg); 
	-o-transform: rotate(-45deg); 
	transform: rotate(-45deg); 
} 
#infinity:after { 
	left: auto; 
	right: 0; 
	-moz-border-radius: 50px 50px 50px 0; 
	border-radius: 50px 50px 50px 0; 
	-webkit-transform: rotate(45deg); 
	-moz-transform: rotate(45deg); 
	-ms-transform: rotate(45deg); 
	-o-transform: rotate(45deg); 
	transform: rotate(45deg); 
} 
/* 鸡蛋 */
#egg { 
	width: 112px; 
	height: 156px; 
	line-height: 268px;
	background-color: rgba(0, 0, 0, .8);
	border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; 
	-webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px; 
} 
/* 食豆人 */
#pacman { 
	width: 0px; 
	height: 0px; 
	border-right: 60px solid transparent; 
	border-top: 60px solid rgba(0, 0, 0, .8);
	border-left: 60px solid rgba(0, 0, 0, .8);
	border-bottom: 60px solid rgba(0, 0, 0, .8);
	border-top-left-radius: 60px; 
	border-top-right-radius: 60px; 
	border-bottom-left-radius: 60px; 
	border-bottom-right-radius: 60px; 
} 
/* 提示对话框 */
#talkbubble { 
	margin-bottom: 10px;
	width: 120px; 
	height: 80px; 
	background: rgba(0, 0, 0, .8);
	position: relative; 
	-moz-border-radius: 10px; 
	-webkit-border-radius: 10px; 
	border-radius: 10px; 
} 
#talkbubble:before { 
	content:""; 
	position: absolute; 
	right: 100%; 
	top: 30px; 
	width: 0; 
	height: 0; 
	border-top: 12px solid transparent; 
	border-right: 26px solid rgba(0, 0, 0, .8);
	border-bottom: 6px solid transparent; 
} 
#yin-yang { 
	width: 96px; 
	height: 48px; 
	background: #eee; 
	border-color: rgba(0, 0, 0, .8);
	border-style: solid; 
	border-width: 2px 2px 50px 2px; 
	border-radius: 100%; 
	position: relative; 
} 
#yin-yang:before { 
	content: ""; 
	position: absolute; 
	top: 50%; 
	left: 0; 
	background: #eee; 
	border: 18px solid rgba(0, 0, 0, .8);
	border-radius: 100%; 
	width: 12px; 
	height: 12px; 
} 
#yin-yang:after { 
	content: ""; 
	position: absolute; 
	top: 50%; 
	left: 50%; 
	background: rgba(0, 0, 0, .8);
	border: 18px solid #eee; 
	border-radius:100%; 
	width: 12px; 
	height: 12px; 
} 
</style>
</head>
<body>
	<div>
		<span id="circle">圆</span>
		<span id="oval">椭圆</span>
	</div>
	<div>
		<span id="triangle-up"></span>
		<span id="triangle-down"></span>
		<span id="triangle-left"></span>
		<span id="triangle-right"></span>
	</div>
	<div>
		<span id="triangle-topleft"></span>
		<span id="triangle-topright"></span>
		<span id="triangle-bottomleft"></span>
		<span id="triangle-bottomright"></span>
	</div>
	<div>
		<span id="parallelogram">平行四边形</span>
		<span id="trapezoid">梯形</span>
		<span id="pentagon"></span>
		<span id="hexagon"></span>
		<span id="octagon">八边形</span>
	</div>
	<div>
		<span id="star-five"></span>
		<span id="star-six"></span>
		<span id="burst-8"></span>
		<span id="burst-12"></span>
	</div>
	<div>
		<span id="cut-diamond"></span>
		<span id="heart"></span>
		<span id="infinity"></span>
		<span id="egg">鸡蛋</span>
		<span id="pacman"></span>
		<span id="talkbubble"></span>
		<span id="yin-yang"></span>
	</div>
</body>
</html>

 

_格鲁特宝宝
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
CSS3 画基本图形，圆形、椭圆形、三角形等
09-27
主要介绍了CSS3 画基本图形，圆形、椭圆形、三角形等的相关资料,需要的朋友可以参考下
纯CSS画的基本图形（矩形、圆形、三角形、多边形、爱心、八卦等）
Dumplingsoul的博客
05-24 1017
　　今天在css-tricks上看到一篇文章，那篇文章让我不禁心头一震，强大的CSS啊，居然能画出这么多基本的图形。图形包括基本的矩形、圆形、椭圆、三角形、多边形，也包括稍微复杂一点的爱心、钻石、阴阳八卦等。当然有一些需要用到CSS3的属性，所以在你打开这篇文章的时候，我希望你用的是firefox或者chrome，当然IE也能看一部分的。那好，下面就一起来看看我们是如何用纯CSS来画这些图形的，如...
纯CSS绘制基本图形
ld_____的博客
09-25 1149
运用CSS3绘制基本图形的方法 HTML代码： 这里的div也可以写span p等元素替代 1、正方形 .area{ width: 100px; height: 100px; background: red; } 长方形，则修改长宽的像素值就行了 2、圆形 .area{ width: 100px; height: 100px; backgrou
html5绘制基本图形-圆形
xyy_933的博客
05-08 1157
绘制圆形 var c=document.getElementById('carvas'); var cxt=c.getContext("2d"); cxt.fillStyle="yellow"; cxt.beginPath();//开始绘制路径 cxt.arc(70,18,15,0,Math.PI*2,true); cxt.fill(); cxt.closePath(
纯CSS画基本图形（圆形、三角形、多边形、爱心、八卦）
DCX_abc的博客
11-12 2028
1、正方形 CSS代码如下：#square{ width: 100px; height: 100px; background: red; }最终效果： 2、长方形 CSS代码如下：#rectangle { width: 200px; height: 100px; background: red; }最终效果： 3、圆形 CSS代码如下：#ci
用css绘制图形,纯 CSS 绘制各种基本图形
weixin_33754535的博客
08-03 1183
最近被问到如何用CSS绘制一个圆，解决这个问题的同时引发了我对CSS绘制图形的兴趣。今天汇总一下CSS绘制的各种基本图形。1.正方形正方形是最简单的图形了，只需要宽高一致就可以绘制出来。// css.square{width: 100px;height: 100px;border: 1px solid black;}//html正方形2.圆形圆形主要用到了border-radius属性。该属性可以...
css3-graphics:基于 CSS3 的图形
06-01
该项目包含 1,000 多个基于 CSS3 的图形代码示例（想想“色板”），包括线性渐变、径向渐变、框阴影、变换、反射、2D/3D 效果和 2D/3D 动画。 令人惊讶的是，这些代码示例创建的视觉效果只需要 CSS 的基本特性和 CSS...
CSS 给图片或背景图片加颜色遮罩
热门推荐
grootbaby
01-18 2万+
一个div同时设置background-color和background-image的话，color是处于img层下方的，无法实现遮罩效果，所以需要再创建一个div作为其子div,然后设置子div的背景颜色，介绍两种方法： 第一种，代码如下： css: .wrap{ position: relative; background: url(i/pic4.jpg) no-r...
CSS3 边框渐变背景色border-image: linear-gradient()
grootbaby
04-01 8410
写法 border-image: gradient top right bottom left; 第一个参数是带有浏览器内核的元素背景渐变写法，如：-webkit-linear-gradient() 第二至第五个参数写法与边框宽度（border-width）的写法是一致的 实例 /* 如下图.border-image1 */ .border-im...
CSS 设置table中tr的行间距
grootbaby
08-21 5747
CSS border-collapse 属性设置表格的边框是否被合并为一个单一的边框 值 描述 separate 默认值。边框会被分开。不会忽略 border-spacing 和 empty-cells 属性。 collapse 如果可能，边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性。 inherit 规定...
火狐浏览器滚动条兼容问题
grootbaby
02-20 5593
在日常开发中，我们经常会用到 overflow: scroll; 但浏览器自带的默认滚动条很难看，因此我们会需要美化它 方法一：自定义美化 谷歌 chrome 浏览器美化滚动条方法：（网上有很多种美化方法，此为一种） .scrollbar { overflow: auto; float: left; border: none; } .scrollbar::-w...
CSS3 实现border边框渐变
grootbaby
08-22 4970
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;border&lt;/title&gt; &lt;style type="text/css"&gt; .box{ widt
CSS 不使用 border-image 实现边框渐变及圆角
grootbaby
04-01 4231
CSS 中 border 用了border-image，border-radius圆角设置就会失效，所以可以通过伪元素::before或者::after，使用背景线性渐变模拟实现。 .border-radius-linear-gradient { width: 200px; height: 200px; position: relative; border: 4...
CSS 设置背景色指定高度
grootbaby
11-29 3741
CSS 设置背景色指定高度，我们通过 ::before 或者 ::after伪类来实现。 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8" /> <title>css 设置指定高度背景色</title> <style type="text/css"> p { display: inline-block; positio
CSS3 greyscale 实现元素转换成黑白色（灰色、置灰）
grootbaby
04-29 2145
CSS3 greyscale 滤镜实现 -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale(100%); filter: gray; /* IE */ ...
CSS 设置table中tbody的自定义滚动条
grootbaby
08-28 1120
&lt;!DOCTYPE HTML&gt; &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt; &lt;title&gt;CSS教程&lt;/title&gt; &lt;style&gt; /* 自定
CSS3 实现元素翻转（不是旋转）
grootbaby
12-24 1119
有时候我们要实现元素的垂直或者水平翻转，尤其是图片的翻转，两张对称的图片，可以用两张图片来解决这个问题，那么其他的元素呢？而且存两张图片并不是上上策，如何用代码实现呢？  CSS3提供了transform属性，实现方法如下： 水平翻转： transform: scale(-1,1); 垂直翻转： transform: scale(1,-1); 那么问题来了，transform:sca...
CSS 页面居中显示问题
grootbaby
11-13 913
/* 页面顶部居中显示 */ .head { position: absolute; top: 0; left: 0; right: 0; bottom: auto; margin: auto; } /* 页面底部居中显示 */ .foot { position: absolute; top: auto; left: 0...
可视化大屏动画css
最新发布
01-30
可视化大屏动画css是一种利用CSS技术制作的动态效果，可以在大屏幕上展示各种图形和动画。通过使用CSS的各种属性和特效，可以制作出丰富多彩的动画效果，包括平移、缩放、旋转、渐变等等。通过合理组合这些属性，...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

_格鲁特宝宝

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值