CSS3六角形代码
来源:子瑜说IT     阅读:621
源码超市
发布于 2019-06-11 04:47
查看主页

分享一段代码实例,它实现了六角形效果。

代码实例如下:

<!doctype html><html><head><meta charset="utf-8"><meta name="author" content="[网页链接](http://www.softwhy.com/%22) /><title>蚂蚁部落</title><style type="text/css">#six {  width: 0;  height: 0;  border-left: 60px solid transparent;  border-right: 60px solid transparent;  border-bottom: 120px solid red;  position: relative;}#six:after {  content: "";  width: 0;  height: 0;  border-left: 60px solid transparent;  border-right: 60px solid transparent;  border-top: 120px solid red;  position: absolute;  top: 40px;  left: -60px;}.six {  position: absolute;  top: 50%;  left: 50%;  transform: translate(-50%,-50%);}</style></head><body>  <div class="six">    <div id="six"></div>  </div></body></html>

最后,给大家推荐一个前台学习进阶内推交流群685910553(前台资料分享),不论你在地球哪个方位,
不论你参与工作几年都欢迎你的入驻!(群内会定期免费提供少量群主收藏的免费学习书籍资料以及整理好的面试题和答案文档!)

假如您对这个文章有任何异议,那么请在文章评论处写上你的评论。

假如您觉得这个文章有意思,那么请分享并转发,或者者也可以关注一下表示您对我们文章的认可与鼓励。

愿大家都能在编程这条路,越走越远。

免责声明:本文为用户发表,不代表网站立场,仅供参考,不构成引导等用途。 系统环境 服务器应用
相关推荐
C++ 11 新特性之随机数库
Docker实战:安装单节点的zookeeper环境
LeetCode算法题-Ugly Number(Java实现-四种解法)
古有七步成诗,今有六步完成DevOps上华为云DevCloud实践
抖音上超火的3D立体动态相册实现代码!  给女朋友一个意外的惊喜
首页
搜索
订单
购物车
我的