微信小程序样式三角形搭建
直接上代码:
看出来了吗?这里构造了一个三角形,真的很神奇。
一个长和宽都为0的容器,设置border的四个边就可以实现不同的三角形,挺佩服css样式的。
以上例子中配置border-bottom有颜色,其余的都是transparent,因此这是一个正三角形。
其实神奇的事情还多,看到除了三角形外,很多形状都可以,因此也摘抄过来了,神奇的css。
如下:
这些代码的来源是css-tricks。原文链接: http://www.itivy.com/ivy/archive/2012/1/16/css-shape.html
1、圆形
CSS代码如下:宽高一样,border-radius设为宽高的一半
#circle {width: 100px;height: 100px;background: red;-moz-border-radius: 50px;-webkit-border-radius: 50px;border-radius: 50px; }
2、椭圆
CSS代码如下:border-radius:水平半径/垂直半径
#oval {width: 200px;height: 100px;background: red;-moz-border-radius: 100px / 50px;-webkit-border-radius: 100px / 50px;border-radius: 100px / 50px; }
3、等边三角
上三角CSS代码如下:设置border-bottom宽度实线颜色,左右border左右宽度为一半,实线透明。下三角、左三角、右三角可举一反三实现。
#triangle-up {width: 0;height: 0;border-left: 50px solid transparent;border-right: 50px solid transparent;border-bottom: 100px solid red; }
4、直角三角
左上三角CSS代码如下:border-top设置宽度实线颜色,border-right等宽实线透明。右上三角、左下三角、右下三角可举一反三实现。
#triangle-topleft {width: 0;height: 0;border-top: 100px solid red; border-right: 100px solid transparent; }
5、平行四边形
CSS代码如下:transform: skew,倾斜角度即为四边形锐角的余角
#parallelogram {width: 150px;height: 100px;margin-left:20px;-webkit-transform: skew(20deg);-moz-transform: skew(20deg);-o-transform: skew(20deg);background: red; }
6、梯形
CSS代码如下:上底长为width的值,下底长为width+border-left+border-right之和,高为border-bottom
#trapezoid {border-bottom: 100px solid red;border-left: 50px solid transparent;border-right: 50px solid transparent;height: 0;width: 100px; }
7、五边形(五角大楼)
CSS代码如下:
#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; }
8、六边形
CSS代码如下:
#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; }
9、八边形
CSS代码如下:
#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; }
10、五角星
CSS代码如下:
#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: ''; }
11、六角星
CSS代码如下:一个上三角和一个下三角拼合而成
#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; }
12、八角星
CSS代码如下:
#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); }
13、十二角星
CSS代码如下:
#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); }
14、爱心
CSS代码如下:
#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%; }
15、无穷大符号
CSS代码如下:
#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); }
16、鸡蛋
CSS代码如下:
#egg {display:block;width: 126px; height: 180px;background-color: red;-webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px;border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; }
17、食豆人(Pac-Man)
CSS代码如下:
#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; }
18、提示对话框
CSS代码如下:
#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; }
19、钻石
CSS代码如下:
#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; }
20、阴阳八卦
CSS代码如下:
#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; }
微信小程序样式三角形搭建相关推荐
- 微信小程序样式入门到精通(wxss)课程007-文本-text-align水平对齐
text-align水平对齐 语法 text-align 是一个基本的属性,它会影响一个元素中的文本行互相之间的对齐方式. 西方语言都是从左向右读,所有 text-align 的默认值是 left.文 ...
- 修改小程序swiper 点的样式_高质量的微信小程序样式模板应该长什么样?
现在不懂技术的小白若想快速制作自己的小程序,一般是通过小程序模板来实现.通过在模板上添加自己的图片.文字.商品等等,可以很简单地生成一个小程序.不过要想把小程序做得好看,你得找高质量的小程序样式模板才 ...
- 小程序 长按api_高质量的微信小程序样式模板应该长什么样?
现在不懂技术的小白若想快速制作自己的小程序,一般是通过小程序模板来实现.通过在模板上添加自己的图片.文字.商品等等,可以很简单地生成一个小程序.不过要想把小程序做得好看,你得找高质量的小程序样式模板才 ...
- 小程序测试用例模板_微信小程序样式:高质量小程序样式模板大全
新手想要制作出美观的小程序,你需要多参考一些好看的微信小程序样式.今天就带大家分析几个高质量小程序的样式,看看别是怎么把小程序做得美观又吸引人的: 1.电商小程序样式 电商小程序首页一般是按照&quo ...
- 微信小程序样式 WXSS
微信小程序样式 WXSS 样式基础 尺寸单位 样式导入 内联样式 选择器 less语法 样式基础 类似于web里面的css WXSS 用来决定 WXML 的组件应该怎么显示. WXSS 具有 CSS ...
- 微信小程序计算三角形面积
微信小程序--计算三角形面积 代码文件: 一..js文件 二..wxml文件 三..wxss文件 结果展示: 代码文件: 一..js文件 代码如下: data: {result:"" ...
- 微信小程序——平台的搭建
#一个简单的微信小程序平台的搭建 目录设置 主要模块 实现了课程.精品.商城.我的三个模块界面的切换.实现课程详情页,价格选择,购物车加购等界面功能. 实现界面 二.精品 三.商场 三.我们 四.购物 ...
- HTML微信小程序的页眉代码,微信小程序样式wxss各种问题总结(不断更新)
1)加入其它样式文件 @import '/css/dialog.wxss'; //注意:必须结尾用分号 2)隐藏滚动条 ::-webkit-scrollbar { width:; height:; c ...
- 微信小程序计算三角形面积,三棱锥体积
微信小程序计算三角形面积,三棱锥体积 index.wxml: <view><form bindsubmit='formsubmit'><view>计算三角形的面积& ...
最新文章
- 管理员信息管理之更新管理员数据
- Evaluation of long read error correction software 长读纠错软件的评估
- 深度学习笔记6:Learning color features with Sparse Autoencoders
- boost::local_time模块实现航班飞行时间的测试程序
- POJ1061 青蛙的约会(线性同余方程)
- sid图像数据_实战材料信息学:使用skimage处理扫描电子显微镜(SEM)图像数据
- mysql —— 分表分区
- c# 事件和委托的区别,使用事件的好处
- 简单实现TabBar的自定义
- linux安装步骤_图解 Debian 10(Buster)安装步骤 | Linux 中国
- 厉害了!3分钟搞定开发部署,这个霸榜的AI开源项目大公司都在用
- 进程queue和线程queue
- python程序设计基础董付国 pdf-董付国《Python程序设计基础 第2版》PDF
- iphone计算机打电话,教你在Win10上使用iPhone的电话、短信功能
- 多线程,io,网编,反射,xml
- 算法 - 随机密码生成算法
- 芯片SA58672(功放芯片)
- 【数据库】关系数据库标准sql语言
- 使用JAVA调用U盾进行客户认证的total solution
- 官方公布中国自行车排名十强辐轮王土拨鼠全世界碳纤维自行车品牌