CSS实现圆角三角五角星五边形爱心12角星8角星圆椭圆圆圈八卦等剖析Word文件下载.docx
- 文档编号:21623054
- 上传时间:2023-01-31
- 格式:DOCX
- 页数:17
- 大小:75.11KB
CSS实现圆角三角五角星五边形爱心12角星8角星圆椭圆圆圈八卦等剖析Word文件下载.docx
《CSS实现圆角三角五角星五边形爱心12角星8角星圆椭圆圆圈八卦等剖析Word文件下载.docx》由会员分享,可在线阅读,更多相关《CSS实现圆角三角五角星五边形爱心12角星8角星圆椭圆圆圈八卦等剖析Word文件下载.docx(17页珍藏版)》请在冰豆网上搜索。
100px;
/*-webkit-border-radius:
*/
-moz-border-radius:
4.圈
#circle{
black;
10px;
/*-moz-border-radius:
border:
3pxredsolid;
5.椭圆
#ellipse{
100px/50px;
6.上三角
#triangle-up{
0px;
border-left:
50pxsolidtransparent;
border-right:
border-bottom:
100pxsolidred;
/*-webkit-border-top-left-radius:
/*-webkit-border-top-right-radius:
/*-webkit-border-bottom-left-radius:
/*-webkit-border-bottom-right-radius:
7.下三角
#triangle-down{
border-top:
border-right:
8.左三角
#triangle-left{
border-bottom:
9.右三角
#triangle-right{
10.顶左
#triangle-topleft{
100pxsolidtransparent;
11.顶右
#triangle-topright{
100solidred;
100solidtransparent;
12.底左
#triangle-bottomleft{
13.底右
#triangle-bottomright{
14.平行四边形
#parallelogram{
150px;
margin-left:
30px;
-webkit-transform:
skew(-30deg);
-moz-transform:
skew(200deg);
-o-transform:
15.
#trapezoid{
16.#star-five{
0;
margin:
50px0;
position:
relative;
display:
block;
70pxsolidred;
-moz-transfrom:
rotate(35deg);
-ms-transform:
#star-five:
before{
30pxsolidtransparent;
80pxsolidred;
absolute;
top:
-45px;
left:
-65px;
content:
"
"
;
rotate(-35deg);
after{
3px;
-105px;
rotate(-70deg);
17.#star-six{
#star-six:
-50px;
18.#pentagon{
54px;
border-width:
50px18px0;
border-style:
solid;
border-color:
redtransparent;
#pentagon:
-85px;
-18px;
045px35px;
transparenttransparentred;
19.#hexagon{
55px;
#hexagon:
-25px;
;
25pxsolidred;
bottom:
20.#octagon{
#octagon:
42px;
29pxsolid#eee;
29pxsolidred;
21#heart{
90px;
#heart:
before,#heart:
80px;
50px50px00;
50px50px00;
rotate(-45deg);
transform:
-webkit-transform-origin:
0100%;
-ms-transform-origin:
-moz-transform-origin:
-o-transform-origin:
tansform-origin:
rotate(45deg);
100%100%;
transform-origin:
22.#infinity{
212px;
#infinity:
before,#infinity:
60px;
20pxsolidred;
50px50px050px;
-webkit-border-radius:
50px50px050px;
auto;
right:
50px50px50px0;
50px50px50px0;
23.#egg{
126px;
180px;
50%50%50%50%/60%60%40%40%;
50%50%50%50%/60%60%40%40%;
24.#pacman{
60pxsolidtransparent;
60pxsolidred;
border-top-left-radius:
border-top-right-radius:
border-bottom-left-radius:
border-bottom-right-radius:
25.#talkbubble{
10px;
-ms-border-radius:
-o-border-radius:
#talkbubble:
100%;
15pxsolidtransparent;
30pxsolidred;
26.#burst-12{
#burst-12:
before,#burst-12:
rotate(30deg);
rotate(60deg);
27.#burst-8{
rotate(20deg);
#burst-8:
rotate(135deg);
29.#diamond{
transparenttransparentredtransparent;
025px25px25px;
20px050px0;
#diamond:
25px;
redtransparenttransparenttransparent;
70px50px050px;
30.#yin-yang{
wi
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- CSS 实现 三角 五角星 五边形 爱心 12 角星 角星圆 椭圆 圆圈 八卦 剖析