css3怎么做多边形,CSS | 实现有趣的多边形

“曾经有一个多边形摆在我面前，我不懂实现，等我查询探索时，才发现它的巧妙非常，css的灵活不绝于此。如果上天能够给它一个说话的机会，它告诉世界：无敌，是多么，多么寂寞！如果非要给这个无敌加上个期限，那就是：无极限！”

——题记，改编源自《仙履奇缘》

正文

前端开发路漫漫，在行走web世界的路途中，我们肯定有遇到多边形的设计，最简单的方法莫过于直接上图片走起，作为一个有“追求”的前端，当然是要“自虐”了……今天我们就来说说前端编程怎么实现多边形，先上一张图，乃们可以先想想怎么实现。

效果图

“咋实现咋实现”，“有文字斜体向上么”，“word天，还是直接给我img吧，感觉好麻烦”。放轻松，深呼吸，跟着我，一起看css如何打磨。

这个类似标签的多边形，我们可以看成平行四边行和立三角形的结合，先上一个矩形：

简单的width，height

那矩形怎么变成平行四边形呢？就拿一个铁丝做的矩形举例，怎么变成平行四边形？有人回答：很简单啊，扭曲一下不就好了。对了，就是扭曲，transform的skew属性。

transform: skew(-10deg);

诶，这时有人问了，没有斜向上呀？怎么破，别急，看：

transform: skew(-10deg) rotate(-8deg)

好了，差不多了吧，可是还有个三角形呢，来，上图：

利用width:0;height: 0

代码如下：

三角形代码

为什么要用before伪元素呢？你懂得，方便布局，这里很巧妙的运用了width和height均为0，利用border的颜色和位置进行设置，包括平时看到的大部分多边形，差不多都是这个原理。最终代码如下：

code

作为css探索者，试试设置不同的border，结合transform，看看有何巧妙的效果，五角星，八边形……手到擒来，向多边形的世界出击吧。

css3怎么做多边形,CSS | 实现有趣的多边形相关推荐

转载-css 属性clip-path之多边形polygon小窥
原文http://www.cnblogs.com/leegao/p/4384499.html css 属性clip-path之多边形polygon小窥起因: 源于上个月中旬微博上很多前端大神在转发国 ...
CSS3实战开发: 纯CSS实现图片过滤分类显示特效
CSS3实战开发: 纯CSS实现图片过滤分类显示特效原文:CSS3实战开发: 纯CSS实现图片过滤分类显示特效各位网友大家好,今天我要带领大家开发一个纯CSS的图片分类显示的网址导航,单纯看标题大 ...
强大的CSS3动画库animate.css
今天要给大家介绍一款强大的CSS3动画库animate.css,animate.css定义了大概50多种动画形式,包括淡入淡出,文字飞入.左右摇摆动画等等.使用animate.css也非常简单,你可以 ...
css裁剪clip-path画多边形
clip-path有三种属性第一种 circle 画圆 clip-path: circle(30%); 30%为半径大小 clip-path: circle(50% at 50% 50%); 后面的 ...
妙味css3课程---1-1、css中自定义属性可以用属性选择器么
妙味css3课程---1-1.css中自定义属性可以用属性选择器么一.总结一句话总结:可以的. 1.如何实现用属性选择器实现a标签根据href里面含有的字段选择背景图片? p a[href*=te ...
使用css3动画做一个简单的灯泡发光模拟
使用css3动画做一个简单的灯泡发光模拟,图片我特意上传到了图床,你也可以试试. <!DOCTYPE html> <html lang="en"> < ...
用空间说说做词云，有趣好玩，颜值爆表
用空间说说做词云,有趣好玩,颜值爆表哈喽大家好,我跟大家分享Python的一个有趣玩法:用QQ空间的说说做词云. 材料准备首先我们准备好看的血小板一只. 然后准备好Python3. 准备selen ...
视频教程-HTML5与CSS3初级入门-HTML5/CSS
HTML5与CSS3初级入门全栈工程师.2000年建设第一网站项目起,15年行业经验,从早期WAP到APP,从SP.IVR到流媒体,云框架: 项目解决顾问. 姜威 ¥39.00 立即订阅扫码下载「 ...
如何做一个孤独又有趣的城市漫游者？
点击文末"阅读原文"即可收听本期节目剪辑.音频 / 卷圈编辑 / SandLiu 卷圈监制 / 姝琦文案 / 星星产品统筹 / bobo 场地支持 / 声湃轩天津录 ...

css3怎么做多边形,CSS | 实现有趣的多边形

css3怎么做多边形,CSS | 实现有趣的多边形相关推荐

最新文章

热门文章