html 形状div,div+css实现各种形状(精心整理)

1.正方形

e6d1cb97d8bc34ebd8cc09867b391169.png

.div {width: 100px;height: 100px;background: red;}

2.矩形

97e7b8d541f80d48cbefae2f57103bf2.png

.div {width: 200px;height: 100px;background: red;}

3.圆形

e0ec73b1c18490a973dc98476ec0d13b.png

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

4.椭圆

11607158afbeaac20a5c6207509d80ac.png

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

5.上三角

952a06ab73a91ac5edb5e5d135c7b352.png

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

6.下三角

82b19cf024c87a18fec390ec08818f12.png

.div {width: 0;height: 0;border-left: 50px solid transparent;border-right: 50px solid transparent;border-top: 100px solid red;}

7.左三角

3d626aed72c40fdd78806c44dd310f57.png

.div {width: 0;height: 0;border-top: 50px solid transparent;border-right: 100px solid red;border-bottom: 50px solid transparent;}

8.右三角

e91cc1c4ee0c8e92cea3253aaa39e4a5.png

.div {width: 0;height: 0;border-top: 50px solid transparent;border-left: 100px solid red;border-bottom: 50px solid transparent;}

9.三角形左上

85f19729cf08d4fc027f162ea0296921.png

.div {width: 0;height: 0;border-top: 100px solid red;border-right: 100px solid transparent;}

10.三角形右上

4e0b0a37d63a7019ee950fd428ca43cf.png

.div {width: 0;height: 0;border-top: 100px solid red;border-left: 100px solid transparent;}

11.三角形左下

70f23b35ec341d9709d9d402d0531756.png

.div {width: 0;height: 0;border-bottom: 100px solid red;border-right: 100px solid transparent;}

12.三角形右下

0216105679107638d809c156d1a7edce.png

.div {width: 0;height: 0;border-bottom: 100px solid red;border-left: 100px solid transparent;}

13.弯尾箭头

bb99829d712afd496268e0dc01e19a6a.png

.div { position: relative; width: 0; height: 0; border-top: 9px solid transparent; border-right: 9px solid red; -webkit-transform: rotate(10deg); -moz-transform: rotate(10deg); -ms-transform: rotate(10deg); -o-transform: rotate(10deg);}

.div:after { content: ""; position: absolute; border: 0 solid transparent; border-top: 3px solid red; border-radius: 20px 0 0 0;top: -12px; left: -9px; width: 12px; height: 12px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg);}

14.梯形

5f04c759d5cad0c739328a5b52d82b6a.png

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

15.平行四边形

758ceaa6ba079c66fd7684a26633ee3b.png

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

16.六角星

78585ba306f6bc936886095f524ad532.png 

.div {width: 0;height: 0;border-left: 50px solid transparent;border-right: 50px solid transparent;border-bottom: 100px solid red;position: relative;}

.div: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;}

17.五角星

1fc9878f7746a9297908246fc2537fbc.png

.div { 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);}

.div: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);}

.div: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: ‘‘;}

18,桃心

c522a67370ff44c3cffe4bfbce16b87d.png

.div {position: relative;width: 100px;height: 90px;}

.div: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%;}

.div: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%;}

19.无限符号

8c7c341c544eb3c9b3ae1d2b3772289a.png

.div {position: relative; width: 212px; height: 100px;}

.div:before,.div: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);}

.div: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);}

20.气泡聊天

61aedafb9722dca0f1eb9cb953da1119.png

.div {width: 120px; height: 80px;background: red;position: relative;-moz-border-radius:10px; -webkit-border-radius: 10px;border-radius: 10px;}

.div: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;}

21.搜索符号

a3aee0a9b49bf7b147dbbc74da5e37ca.png

.div{ font-size: 10em; /* This controls the size. */ display: inline-block; width: 0.4em; height: 0.4em; border: 0.1em solid red; position: relative; border-radius: 0.35em;}

.div::before{ content: ""; display: inline-block; position: absolute; right: -0.25em; bottom: -0.1em; border-width: 0; background: red; width: 0.35em; height: 0.08em; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg);}

22.锥形

bc9bcfa4d224c70485e3ec0ff7b80b75.png

.div {width: 0;height: 0;border-left: 70px solid transparent;border-right: 70px solid transparent;border-top: 100px solid red; -moz-border-radius: 50%; -webkit-border-radius: 50%;border-radius: 50%;}

23.月亮

cb81957772a67a3b94e995f69cf25e58.png

.div { width: 80px;height: 80px;border-radius: 50%;box-shadow: 15px 15px 0 0 red;}

24.十字架

d25e525ab3032acd7a6a5ca27bbc9c44.png

.div {background: red;height: 100px;position: relative;width: 20px;}

.div:after { background: red;content: "";height: 20px;left: -40px;position: absolute;top:40px;width: 100px;}

原文:http://www.cnblogs.com/jinglover/p/5605957.html

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

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

相关文章

4.1.5事件

用事件有一种监听的思想 一个事件对应一个委托 事件是委托类型 一个事件对应一个委托,委托可以对应多个方法 如气球爆炸了 气球的反应 小孩的反应 事件源有代码自动激发事件 扔出事件 —————————————— 3.只能在类的内部触发事件 4.可以在内部…

485不用双绞线可以吗_现在在上海,挡风玻璃可以一个标志都不用贴吗?

问近日,有市民咨询:现在在上海,车上挡风玻璃可以一个标志都不用贴吗?答可以一个标志都不贴。自2020年3月1日起,本市机动车在本市办理注册、变更、转移登记和核发检验标志、补换检验标志业务时,将自动生成检…

Java和Python中类似Kotlin的生成器,续:附加参数

介绍 在今天的文章中,我们将继续上周的文章,内容涉及用Java和Python制作类似于Kotlin的构建器,扩展构建器API以采用一些可选参数来提高灵活性。 我们继续我们HTML示例,尝试添加标记属性,例如类,id和样式。 …

vs2015 html页面没有试图,vs2015 web设计视图假死,求帮助

你好,首先,请在发送一个请求去验证你的MSDN账号。然后,从你的描述来看,即使创建新项目,VS的design界面出现不了还是你的VS安装有问题。我们可以从两方面考虑:1.系统环境建议你检查一下Windows系统更新&…

nodejs 之 nvm和pm2

说道 node不得不提到nodejs的版本管理nvm和Node应用的进程管理器pm2。 当然,关于这两个的介绍的文章那么多,随意baidu,bing,google就可以。 我这里是给自己打一个标签,方便日后 查询, 二是方便一些和我一样的小白,能速…

2021上饶市高考中考成绩查询,2021年上饶中考成绩公布查询时间 上饶中考成绩查询方式入口...

2018年上饶中考成绩公布查询时间 上饶中考成绩查询方式入口2018年上饶高考结束了,可是上饶中考又来了!6月注定是一个不平淡的月份。又一大批孩子朝着青春出发踏着坚定的脚步,行走在如火的六月。宁静的清晨,静谧的夜,那条反反复复走…

vue 实例化几种方式_vue注册组件的几种方式总结

vue注册组件的几种方式总结 1、全局注册(这种方式注册组件必须在vue实例化之前声明) Vue.component(tag-name,{}) 2、局部注册 var Child = {template: A custom component! } new Vue({// ... components: {// 将只在父模板可用 my-component: Child } }) 3、扩展实例 // 定…

gson json和类转换_带有GSON和抽象类的JSON

gson json和类转换经过多年使用org.json库在Java中支持JSON数据交换格式后,我已切换到Google Gson 。 org.json是一个较低层的库,因此您必须创建JSONObject,JSONArray,JSONString等…并执行其他低层工作。 Gson简化了这项工作。 它…

自考18年4月计算机应用基础,2019年自学考试计算机应用基础试题(18)

2019年4月自考报名已经拉开序幕,同学们可以开始准备自考复习,下面是2019年自学考试计算机应用基础试题(18),了解更多自学考试资讯请锁定自学考试网,更有海量模拟试题,精品复习资料等你来下载!1.Windows 中删除文件夹的…

git中文件的三种状态

用xcode的时候,左侧栏文件的邮右边时不时会看到M,A这一类的字母。当然,这些以后再写上。先说一下git里文件的三种状态 已提交(committed) 已经提交的本地仓库(repository),需要手动…

创建一个带参数的formgoup_gin框架如何获取带文件的formData请求?

**前端代码如下**function upFile() {var formData new FormDatavar file document.getElementById("upload").files[0]var text document.getElementById("text").valueformData.append("upload",file)formData.append("text",tex…

如何从URL查询字符串获得/附加视图参数(示例)?

让我们剖析几个简单的用例,并查看视图参数的工作原理(视图参数名称不是强制性的,以匹配通过URL查询字符串传递的请求参数,但在本文中,我们将重点讨论这种情况): 情况1 在index.xhtml页面中&…

桌面怎么设置 计算机 网络,Win10 10130桌面电脑网络图标怎么设置?

越来越多朋友的计算机安装Windows10系统,现在Windows10系统已经升级到10130版,我的计算机升级到了10130版。安装Windows10的10130版系统后,桌面只有回收站和软媒的图标,如何把电脑、网络、用户的文件、控制面板等图标设置到桌面上…

swift 打开第三方应用_iOS卡通人物帧动画入门9(大结局):番外篇-扩展第三方类

扩展第三方类细心的朋友可能会发现,我们前面计算主角的大小用的总是同一方向第一帧纹理的大小,如果纹理大小有出入的话,会产生较大的偏差,最好的方法是取当前动画帧纹理的大小。不过这有些难度,所以我们退之求其次&…

awk说明书(转)

ref:http://blog.chinaunix.net/uid-429659-id-122573.html awk使用手册 作者:awk使用手册什么是awk? 你可能对UNIX比较熟悉,但你可能对awk很陌生,这一点也不奇怪,的确,与其优秀的功能相比,awk…

jpa jdbc jndi_没有J2EE容器的JNDI和JPA

jpa jdbc jndi我们希望通过尽可能简单的设置来测试一些JPA代码。 计划仅使用Java和Maven,不使用应用程序服务器或其他J2EE容器。 我们的JPA配置需要两件事才能成功运行: 数据库来存储数据, JNDI访问数据库。 这篇文章分为两个部分。 第一部…

本科计算机应用水平,湖南工程学院全日制非计算机专业本科生参加湖南省计算机应用水平等级考试的规定...

根据省教育厅《关于印发湖南省普通高等学校非计算机专业学生计算机应用水平等级考试大纲的通知》(湘教发〔2012〕58号)精神,经研究,现对我校全日制非计算机专业本科生参加计算机等级考试有关事项作如下规定:1.凡我校全日制非计算机…

Linux umask限制导致php的mkdir 0777无效

原因:mkdir权限受当前linux umask限制 解决方法: 1 $oldmask umask(0); 2 mkdir("test", 0777); 3 umask($oldmask); 参考SO:http://stackoverflow.com/a/3997671/4009148转载于:https://www.cnblogs.com/gy1010/p/6674243.html

cstringw转lpctstr_新手必看:CString 和 LPCTSTR等之间的转换大全 | 求索阁

CString 和 LPCTSTR 可以说通用。 原因在于CString定义的自动类型转换,没什么奇特的,最简单的C操作符重载而已。常量字符串ansi和unicode的区分是由宏_T来决定的。但是用_T( "abcd ")时, 字符串 "abcd "就会根…

vue如何过滤html标签,去除富文本中的html标签及vue、react、微信小顺序中的过滤器...

在猎取富文本后,又只需显现部分内容,须要去除富文本标签,然后再截取个中一部分内容;然后就是过滤器,在微信小顺序中运用照样挺屡次的,在vue及react中也遇到过1.富文本去除html标签去除html标签及 空格let r…