CSS实现各种形状
2017-12-13 14:37
169 查看
CSS3的一个非常酷的特性是允许我们创建各种规则和不规则形状的图形,从而可以减少图片的使用。以前只能在Photoshop等图像编辑软件中制作的复杂图形现在使用CSS3就可以完成了。通过使用新的CSS属性,像transform和border-radius,我们可以创建非常漂亮和复杂的图形效果。
圆形
要使用CSS来制作一个圆形,我们需要一个
圆形在设置CSS时要设置宽度和高度相等,然后设置
正方形
正方形是CSS图形中最简单的图形之一,同样使用一个
正方形的CSS样式只需要设置相同的宽度和高度即可。
长方形
与正方形一样,CSS长方形也非常简单:
与正方形不同的是,长方形的长度和高度为不同的值。
椭圆形
椭圆形是正圆形的一个变体,同样使用一个带ID的
设置椭圆形的CSS时,高度要设置为宽度的一半,
三角形
要创建一个CSS三角形,需要使用
倒三角形
与正三角形不同的是,倒三角形要设置的是
左三角形
左三角形操作的是
右三角形
右三角形操作的是
菱形
制作菱形的方法有很多种。这里使用的是
梯形
梯形是三角形的一个变体,设置CSS梯形时,左右两条边设置为相等,并且给它设置一个宽度。
平行四边形
平行四边形的制作方式是使用
星形
星形的HTML结构同样使用一个带ID的空
六角星形
和五角星的制作方法不同,六角星形状的制作方法是操纵
五边形
创建CSS五边形需要结合两个图形:一个梯形,然后在它的上面放一个三角形,共同组成一个五边形。
六边形
六边形的制作方法可以有很多种,可以像五边形一样,先制作一个长方形,然后在它的上面和下面各放置一个三角形。
八角形
八角形的制作方法也有多种方式,这里使用的是先制作两个相同的梯形,然后在两边分别放置一个三角形。
心形
心形的制作是非常复杂的,可以使用伪元素来制作,分别将伪元素旋转不同的角度,并修改
蛋形
蛋形时椭圆形的一个变体,它的高度要比宽度稍大,并且设置正确的
无穷符号
无穷符号可以通过
消息提示框
消息提示框可以先制作一个圆角矩形,然后在需要的地方放置一个三角形。
吃豆人
吃豆人的制作方法是先在一个圆形里面制作一个透明的三角形。
圆形
要使用CSS来制作一个圆形,我们需要一个
div,被给它设置一个ID。
border-radius属性为宽度或高度的一半即可:
正方形是CSS图形中最简单的图形之一,同样使用一个
div,并设置一个ID。
与正方形一样,CSS长方形也非常简单:
椭圆形是正圆形的一个变体,同样使用一个带ID的
div来制作。
border-radius属性也要做相应的改变:
#oval { |
要创建一个CSS三角形,需要使用
border,通过设置不同边的透明效果,我们可以制作出三角形的现状。另外,在制作三角形时,宽度和高度要设置为0。
与正三角形不同的是,倒三角形要设置的是
border-top、
border-left和
border-right三条边的属性:
左三角形操作的是
border-top、
border-left和
border-right三条边的属性,其中上边和下边要设置透明属性。
右三角形操作的是
border-bottom、
border-left和
border-right三条边的属性,其中上边和下边要设置透明属性。
制作菱形的方法有很多种。这里使用的是
transform属性和
rotate相结合,使两个正反三角形上下显示。
梯形是三角形的一个变体,设置CSS梯形时,左右两条边设置为相等,并且给它设置一个宽度。
#trapezium { |
平行四边形的制作方式是使用
transform属性使长方形倾斜一个角度。
星形的HTML结构同样使用一个带ID的空
div。星形的实现方式比较复杂,主要是使用
transform属性来旋转不同的边。仔细体会下面的代码。
和五角星的制作方法不同,六角星形状的制作方法是操纵
border属性来制作两半图形,然后合并它们。
创建CSS五边形需要结合两个图形:一个梯形,然后在它的上面放一个三角形,共同组成一个五边形。
六边形的制作方法可以有很多种,可以像五边形一样,先制作一个长方形,然后在它的上面和下面各放置一个三角形。
八角形的制作方法也有多种方式,这里使用的是先制作两个相同的梯形,然后在两边分别放置一个三角形。
心形的制作是非常复杂的,可以使用伪元素来制作,分别将伪元素旋转不同的角度,并修改
transform-origin属性来元素的旋转中心点。
蛋形时椭圆形的一个变体,它的高度要比宽度稍大,并且设置正确的
border-radius属性即可以制作出一个蛋形。
无穷符号可以通过
border属性和设置伪元素的角度来实现。
消息提示框可以先制作一个圆角矩形,然后在需要的地方放置一个三角形。
吃豆人的制作方法是先在一个圆形里面制作一个透明的三角形。
}
相关文章推荐
- css实现各种形状(后续会有补充)
- CSS实现各种形状
- 用css实现的各种形状
- CSS实现各种形状
- 各种css形状 CSS实现圆角,三角,五角星,五边形,爱心,12角星,8角星,圆,椭圆,圆圈,八卦等等
- CSS居中的各种实现方式
- CSS代码实例:用CSS代码写出的各种形状图形
- CSS 实现图片灰度效果 兼容各种浏览器
- java实现画图,可更换图形的各种形状,颜色,可擦除
- 用css绘制各种形状(放松一下)
- 你想不到的!CSS 实现的各种球体效果【附在线演示】
- CSS实现圆角,三角形,五角星,五边形,爱心,圆,椭圆,圆圈,八卦等形状
- 前端(各种demo)一:css实现三角形,css实现梯形,pop弹层,css伪类before,after使用,svg使用(持续更新中)
- 用css绘制各种形状
- 纯CSS实现tooltip提示框,CSS箭头及形状
- css绘制各种形状
- 纯 CSS 创建各种不同的图形形状
- 纯 CSS 创建各种不同的图形形状
- css 实现层半透明,且块内文字不透明(兼容ie6等各种浏览器)
- CSS 实现图片灰度效果 兼容各种浏览器