当前位置:主页 > 英国bt365网址 > 英国bt365网址

用css3制作正方形,三角形,扇形,饼图

作者: 365bet手机娱乐场 来源: 365bet体育投 发布时间:2019-03-05
1
在边界处建立一个正方形。
如果通过将框容器的宽度和高度设置为0并将宽度值增加到每侧来更改颜色,则四个三角形组合以指向不同的颜色。
HTML code:divid =“square”11 / div
CSS3代码:
#square{width:0;高度:0。边缘宽度:100像素。边缘样式:坚固。边缘颜色:红色蓝色绿色黄色。线高:99 em。溢出:隐藏。光标:指针。保证金:30pxauto;}
显示效果:
如您所见,四个三角形指向不同的方向。
2
如果将四个三角形中的三个的颜色设置为透明,则它将变为三角形。
HTML:
Divid =“triangle”11 / div
CSS:
#triangle{width:0; height:0。边框宽度:100像素。边框风格:坚固。border-color:红色透明透明透明。线高:99 em。溢出:隐藏。光标:指针。保证金:30pxauto;}
效果:
3
您需要知道在css 3中输入圆角属性(半径 - 边)。设置此值时,边框显示为圆角。
同样,我们舍入方块以获得饼图。
HTML:divid =“circle”11 / div
CSS:
#Circle{
宽度:0。身高:0。边缘半径:100像素。边缘宽度:100像素。边缘样式:坚固。边缘颜色:红色蓝色绿色黄色。线高:99 em。溢出:隐藏。光标:指针。保证金:30pxauto。
效果:
4
同样,您可以设置三条边的透明度以获得扇区。
HTML:divid =“粉丝”11 / div
CSS:
#fan{
宽度:0。身高:0。边缘半径:100像素。边缘宽度:100像素。边缘样式:坚固。边缘颜色:红色透明透明透明。线高:99 em。溢出:隐藏。光标:指针。保证金:30pxauto。
效果:

bt36体育在线投注