欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

CSS 魔法系列:纯 CSS 绘制基本图形(圆、椭圆等)

程序员文章站 2022-03-31 15:25:04
...

  我们的网页因为 CSS 而呈现千变万化的风格。这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果。特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来。《CSS 魔法系列》继续给大家带来 CSS 在网页中以及图形绘制中的使用。这篇文章给大家带来的是纯 CSS 绘制基本图形(圆、椭圆等)。

您可能感兴趣的相关文章

 

Square

 
 
#square {
	width: 100px;
	height: 100px;
	background: red;
}

  

Rectangle

 
 
#rectangle {
	width: 200px;
	height: 100px;
	background: red;
}

  

Circle

 
 
#circle {
	width: 100px;
	height: 100px;
	background: red;
	-moz-border-radius: 50px;
	-webkit-border-radius: 50px;
	border-radius: 50px;
}

/* Cleaner, but slightly less support: use "50%" as value */

  

Oval

 
 
#oval {
	width: 200px;
	height: 100px;
	background: red;
	-moz-border-radius: 100px / 50px;
	-webkit-border-radius: 100px / 50px;
	border-radius: 100px / 50px;
}

/* Cleaner, but slightly less support: use "50%" as value */

  

Trapezoid

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

  

Parallelogram

 
 
#parallelogram {
	width: 150px;
	height: 100px;
	-webkit-transform: skew(20deg);
	   -moz-transform: skew(20deg);
	     -o-transform: skew(20deg);
	background: red;
}

  

您可能感兴趣的相关文章

 

本文链接:CSS 魔法系列:CSS 绘制基本图形(圆、椭圆等)

编译来源:梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源

转载于:https://www.cnblogs.com/lhb25/p/css-and-css3-shapes.html