用CSS画基本图形

用CSS画基本图形

1、正方形 

 

代码如下：

 

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

 

2、长方形 

 

代码如下:
#rectangle { 
width: 200px; 
height: 100px; 
background: red; 
}

 

3、圆形

 

 

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

 

4、椭圆

 

 

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

 

5、上三角

 

 

代码如下:
#triangle-up { 
width: 0; 
height: 0; 
border-left: 50px solid transparent; 
border-right: 50px solid transparent; 
border-bottom: 100px solid red; 
}

 

6、下三角

 

 

代码如下:
#triangle-down { 
width: 0; 
height: 0; 
border-left: 50px solid transparent; 
border-right: 50px solid transparent; 
border-top: 100px solid red; 
}

 

7、左三角

 

 

代码如下:
#triangle-left { 
width: 0; 
height: 0; 
border-top: 50px solid transparent; 
border-right: 100px solid red; 
border-bottom: 50px solid transparent; 
}

 

8、右三角

 

 

代码如下:
#triangle-right { 
width: 0; 
height: 0; 
border-top: 50px solid transparent; 
border-left: 100px solid red; 
border-bottom: 50px solid transparent; 
}

 

9、左上三角

 

 

代码如下:
#triangle-topleft { 
width: 0; 
height: 0; 
border-top: 100px solid red; 
border-right: 100px solid transparent; 
}

 

10、右上三角

 

 

代码如下:
#triangle-topright { 
width: 0; 
height: 0; 
border-top: 100px solid red; 
border-left: 100px solid transparent; 
}

 

11、左下三角

 

 

代码如下:
#triangle-bottomleft { 
width: 0; 
height: 0; 
border-bottom: 100px solid red; 
border-right: 100px solid transparent; 
}

 

12、右下三角

 

 

代码如下:
#triangle-bottomright { 
width: 0; 
height: 0; 
border-bottom: 100px solid red; 
border-left: 100px solid transparent; 
}

 

13、平行四边形

 

 

代码如下:
#parallelogram { 
width: 150px; 
height: 100px; 
margin-left:20px; 
-webkit-transform: skew(20deg); 
-moz-transform: skew(20deg); 
-o-transform: skew(20deg); 
background: red; 
}

 

14、梯形

 

 

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

 

15、六角星

 

 

代码如下:
#star-six { 
width: 0; 
height: 0; 
border-left: 50px solid transparent; 
border-right: 50px solid transparent; 
border-bottom: 100px solid red; 
position: relative; 
} 
#star-six:after { 
width: 0; 
height: 0; 
border-left: 50px solid transparent; 
border-right: 50px solid transparent; 
border-top: 100px solid red; 
position: absolute; 
content: ""; 
top: 30px; 
left: -50px; 
}

 

16、五角星

 

 

代码如下:
#star-five { 
margin: 50px 0; 
position: relative; 
display: block; 
color: red; 
width: 0px; 
height: 0px; 
border-right: 100px solid transparent; 
border-bottom: 70px solid red; 
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 red; 
border-left: 30px solid transparent; 
border-right: 30px solid transparent; 
position: absolute; 
height: 0; 
width: 0; 
top: -45px; 
left: -65px; 
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: red; 
top: 3px; 
left: -105px; 
width: 0px; 
height: 0px; 
border-right: 100px solid transparent; 
border-bottom: 70px solid red; 
border-left: 100px solid transparent; 
-webkit-transform: rotate(-70deg); 
-moz-transform: rotate(-70deg); 
-ms-transform: rotate(-70deg); 
-o-transform: rotate(-70deg); 
content: ''; 
}

 

17、五角大楼

 

 

代码如下:
#pentagon { 
position: relative; 
width: 54px; 
border-width: 50px 18px 0; 
border-style: solid; 
border-color: red transparent; 
} 
#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 red; 
}

 

18、六边形

 

 

代码如下:
#hexagon { 
width: 100px; 
height: 55px; 
background: red; 
position: relative; 
} 
#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 red; 
} 
#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 red; 
}

 

19、八角形

 

 

代码如下:
#octagon { 
width: 100px; 
height: 100px; 
background: red; 
position: relative; 
} 
#octagon:before { 
content: ""; 
position: absolute; 
top: 0; 
left: 0; 
border-bottom: 29px solid red; 
border-left: 29px solid #eee; 
border-right: 29px solid #eee; 
width: 42px; 
height: 0; 
} 
#octagon:after { 
content: ""; 
position: absolute; 
bottom: 0; 
left: 0; 
border-top: 29px solid red; 
border-left: 29px solid #eee; 
border-right: 29px solid #eee; 
width: 42px; 
height: 0; 
}

 

20、爱心

 

 

代码如下:
#heart { 
position: relative; 
width: 100px; 
height: 90px; 
} 
#heart:before, 
#heart:after { 
position: absolute; 
content: ""; 
left: 50px; 
top: 0; 
width: 50px; 
height: 80px; 
background: red; 
-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%; 
}

 

21、无穷大符号

 

 

代码如下:
#infinity { 
position: relative; 
width: 212px; 
height: 100px; 
} 
#infinity:before, 
#infinity:after { 
content: ""; 
position: absolute; 
top: 0; 
left: 0; 
width: 60px; 
height: 60px; 
border: 20px solid red; 
-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); 
}

 

22、鸡蛋

 

 

代码如下:
#egg { 
display:block; 
width: 126px; 
height: 180px; -webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px; 
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; 
}

 

23、食逗人（Pac-Man）

 

 

代码如下:
#pacman { 
width: 0px; 
height: 0px; 
border-right: 60px solid transparent; 
border-top: 60px solid red; 
border-left: 60px solid red; 
border-bottom: 60px solid red; 
border-top-left-radius: 60px; 
border-top-right-radius: 60px; 
border-bottom-left-radius: 60px; 
border-bottom-right-radius: 60px; 
}

 

24、提示对话框

 

 

代码如下:
#talkbubble { 
width: 120px; 
height: 80px; 
background: red; 
position: relative; 
-moz-border-radius: 10px; 
-webkit-border-radius: 10px; 
border-radius: 10px; 
} 
#talkbubble:before { 
content:""; 
position: absolute; 
right: 100%; 
top: 26px; 
width: 0; 
height: 0; 
border-top: 13px solid transparent; 
border-right: 26px solid red; 
border-bottom: 13px solid transparent; 
}

 

25、12角星

 

 

代码如下:
#burst-12 { 
background: red; 
width: 80px; 
height: 80px; 
position: relative; 
text-align: center; 
} 
#burst-12:before, #burst-12:after { 
content: ""; 
position: absolute; 
top: 0; 
left: 0; 
height: 80px; 
width: 80px; 
background: red; 
} 
#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); 
}

 

26、8角星

 

 

代码如下:
#burst-8 { 
background: red; 
width: 80px; 
height: 80px; 
position: relative; 
text-align: center; 
-webkit-transform: rotate(20deg); 
-moz-transform: rotate(20deg); 
-ms-transform: rotate(20deg); 
-o-transform: rotate(20eg); 
transform: rotate(20deg); 
} 
#burst-8:before { 
content: ""; 
position: absolute; 
top: 0; 
left: 0; 
height: 80px; 
width: 80px; 
background: red; 
-webkit-transform: rotate(135deg); 
-moz-transform: rotate(135deg); 
-ms-transform: rotate(135deg); 
-o-transform: rotate(135deg); 
transform: rotate(135deg); 
}

 

27、钻石

 

 

代码如下:
#cut-diamond { 
border-style: solid; 
border-color: transparent transparent red transparent; 
border-width: 0 25px 25px 25px; 
height: 0; 
width: 50px; 
position: relative; 
margin: 20px 0 50px 0; 
} 
#cut-diamond:after { 
content: ""; 
position: absolute; 
top: 25px; 
left: -25px; 
width: 0; 
height: 0; 
border-style: solid; 
border-color: red transparent transparent transparent; 
border-width: 70px 50px 0 50px; 
}

 

28、阴阳八卦（霸气的这个）

 

 

代码如下:
#yin-yang { 
width: 96px; 
height: 48px; 
background: #eee; 
border-color: red; 
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 red; 
border-radius: 100%; 
width: 12px; 
height: 12px; 
} 
#yin-yang:after { 
content: ""; 
position: absolute; 
top: 50%; 
left: 50%; 
background: red; 
border: 18px solid #eee; 
border-radius:100%; 
width: 12px; 
height: 12px; 
}

 

转载于:https://www.cnblogs.com/Michelle20180227/p/8717904.html

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/466204.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

输出函数

输出函数

C语言中基本的输入输出函数有： putchar ():把变量中的一个字符常量输出到显示器屏幕上; getchar ();从键盘上输入一个字符常量,此常量就是该函数的值; printf ();把键盘中的各类数据,加以格式控制输出到显示器屏幕上; scanf ();从键盘上输入各类数据,并存放到程…
阅读更多...
人格魅力的六法宝

人格魅力的六法宝

人格魅力的六法宝 1、学会沉默 沉默是一种温柔，一种甜甜的爱心，一种东方的冰清玉洁的美丽；沉默是一种力度，一种坚韧，一种成竹在胸的自信和威仪。在回答某一具体问题时，沉默是你最好的回答。 2、学会微笑 微…
阅读更多...
【模板】LCA

【模板】LCA

最近公共祖先LCA 1 #include<bits/stdc.h>2 #define MAX 100000013 4 using namespace std;5 namespace edge_and_question{6 int tot,q_tot;7 int head[MAX],q_head[MAX];8 9 struct data{ 10 int to; 11 int nxt; 12 int lca;…
阅读更多...
手撸双链表，图解

手撸双链表，图解

C语言&#xff0c;链表C实现单向链表深入理解Linux内核链表跟单链表不同&#xff0c;双链表的节点包含两个指针&#xff0c;一个指针指向上一个元素&#xff0c;一个指针指向下一个元素。▌如下图学习数据结构的时候&#xff0c;要像认识一个人一样&#xff0c;要了解这个人有什…
阅读更多...
VS建lUML画类图

VS建lUML画类图

https://blog.csdn.net/caoshangpa/article/details/79797849
阅读更多...
C++学习方法

C++学习方法

1.把C当成一门新的语言学习(和C没啥关系!真的。); 　　2.看《Thinking In C》&#xff0c;不要看《C变成死相》; 　　3.看《The C Programming Language》和《Inside The C Object Model》,不要因为他们很难而我们自己是初学者所以就不看; 　　4.不要被VC、BCB、BC、MC、TC等词…
阅读更多...
IBM DS300 安装

IBM DS300 安装

还是不太习惯51的BLOG&#xff0c;用多了其它网站的&#xff01;转载于:https://blog.51cto.com/jackzzs/145512
阅读更多...
Python编程之数据结构与算法练习_004

Python编程之数据结构与算法练习_004

Some排序算法的Python实现。不废话写原理&#xff0c;直接撸代码。 1.Bubble sort 冒泡排序 import random import copymaxSize 10000 maxValue 10000#Generate random data array[0]*maxSize for i in range(maxSize):array[i] random.randint(10,maxValue)#Correct method…
阅读更多...
STM32串口用中断还是用轮询

STM32串口用中断还是用轮询

1.从轮询到中断很多同学都不喜欢用中断&#xff0c;而偏爱用轮询的操作方式。这是不是和我们的天性有关呢&#xff1f;每个人都喜欢一切尽在掌握中&#xff0c;肯定都不喜欢被打断。我们常常都有这样的经验&#xff1a;正在跟别人说一件事&#xff0c;然后突然有个电话打进来&a…
阅读更多...
Castle

Castle

Csocket的作用 利用MFC的Csocket类实现网络通信 https://www.cnblogs.com/sva2005/articles/319796.html _tcstod 字符串转 IEEE 双精度浮点数 http://www.cppfans.com/cbknowledge/reference/cstdlib/strtod.asp strtol, _tcstol, wcstol - 字符串转 32 位长整数 (long), 支…
阅读更多...
linux 笔记之一mysql源码包安装

linux 笔记之一mysql源码包安装

linux的MySQL安装 添加mysql组 1 groupadd mysql 将MySQL用户添加到MySQL组中 2 useradd -g mysql mysql 进入MySQL目录 3 cd src/mysql-4.0.27 在安装过程中缺少文件(Linuxthreads)所以将Linuxthreads从定到/usr/include/pthread.h 4 echo /* Linuxthreads */ >> /u…
阅读更多...
C++ —— C++高手之路

C++ —— C++高手之路

推荐一些C经典书籍 c程序设计教程 c编程思想 c大学教程 c程序设计语言 数据结构算法与应用c语言描述 c标准模板库------自修教程与参考手册 泛型编程与STL 深度探索c对象模型 设计模式---可复用面向对象软件的基础 重构---改善既有代码的设计 Essential c Effective…
阅读更多...
使用Buildroot为I.MX6制作根文件系统

使用Buildroot为I.MX6制作根文件系统

1.引言接触Freescale/NXP的I.MX6处理器大概有了两年多的时间&#xff0c;对于一个最初玩MCU的我来说&#xff0c;真是面临了很多的挑战。最让我感到郁闷和崩溃的是那个官方的基于Yocto的开发环境&#xff0c;搭建它要求真是太高了&#xff0c;机器得有上百G的空间&#xff0c;U…
阅读更多...
SQL查询优化《三》：少做重复的工作

SQL查询优化《三》：少做重复的工作

1.控制同一语句的多次执行2.减少多次的数据转换3.杜绝不必要的子查询和连接表&#xff0c;子查询在执行计划一般解释成外连接&#xff0c;多余的连接表带来额外的开销。4.合并对同一表同一条件的多次UPDATE&#xff0c;比如 UPDATE EMPLOYEE SET FNAMEHAIWER WHERE EMP_ID VPA3…
阅读更多...
C++ —— 初识C++

C++ —— 初识C++

初识C 一、C概述 1、C语言诞生 &#xff08;1&#xff09;C语言也是诞生于美国贝尔实验室 &#xff08;2&#xff09;C语言是1983年由Bjarne Stroustrup推出的 &#xff08;3&#xff09;C语言是在C语言的基础上推出的 &#xff08;4&#xff09;C语言进一步扩充和完善了C…
阅读更多...
扁平的信标灯

扁平的信标灯

▌交流磁场信号会改变地磁计吗&#xff1f;卓大&#xff0c;我想问个问题&#xff0c;智能车比赛的交流信号磁场会对地磁计产生影响吗?▓ 回复&#xff1a; 在今年的智能车竞赛中存在两个交流信号源&#xff1a;&#xff08;1&#xff09;第一种是电磁赛道上的电磁导引线&…
阅读更多...
如何选择合适的Web安全网关?

如何选择合适的Web安全网关?

日益加剧的网络威胁让Web安全网关&#xff08;Web Security Gateway&#xff0c;WSG&#xff09;逐渐成为企业边界网络安全防护的新宠。基于OSI模型第七层(应用层)的Web安全网关具有反恶意软件、上网行为管理以及安全审计等诸多安全检测或管控能力。然而面对铺天盖地的广告和琳…
阅读更多...
ADS TC3通信

ADS TC3通信

倍福TC3安装方法 WIN7 32 https://wenku.baidu.com/view/7fb11a200a4e767f5acfa1c7aa00b52acec79c62.html [Visual Studio C] [ 倍福 TwinCAT3 ] ADS通讯工程实现 https://blog.csdn.net/Robot_Starscream/article/details/83869264 倍福TwinCAT3上位机与PLC通信测试(ADS通信)…
阅读更多...
js字符串转数字（小数），数字转字符串

js字符串转数字（小数），数字转字符串

将字符串转化为小数并加法计算&#xff0c;然后保留两位小数(parseFloat(that.data.pay_price) parseFloat(that.data.qiandao)).toFixed(2)将数字转为字符串并计算长度yuan_price10yuan_price.toString.length //输出2 转载于:https://www.cnblogs.com/shark1100913/p/8782…
阅读更多...
C++ —— C++程序编译的四个过程

C++ —— C++程序编译的四个过程

C —— C程序编译的四个过程 g是Linux下C的编译器&#xff1b;我为什么会选择Linux下的g编译器&#xff0c;就是因为g可以看到程序从编译到运行的过程做了些什么。而VS等集成开发环境看不到这些&#xff0c;并不是说VS工具不好&#xff0c;&#xff08;VS还是相当好用的...&…
阅读更多...
最新文章

Copyright @ 2022~2023