css怎么实现多边形插图

本文操作环境：windows7系统、HTML5&&CSS3版，DELL G3电脑

css怎么实现多边形？

CSS | 实现有趣的多边形

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

eee59cd368571848811d2e44edad972.png

css怎么实现多边形插图2

效果图

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

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

d6db9abe3cfe4a4ead51e03bbd9ff89.png

简单的width，height

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

b5d964ed50e3fa4b382eded6da27a2c.png

transform: skew(-10deg);

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

5610c2ceb940534eb1fe5202ed1a11d.png

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

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

0bab2bd72b2aae3d1ab04433a61d227.png

利用width:0;height: 0

代码如下：

51a9a4790d08ca698dee2d006a67145.png

三角形代码

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

e5bb67efed93d43acc2b0f9f088ab0f.png

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

推荐学习：《css视频教程》

以上就是css怎么实现多边形的详细内容，更多请关注亿码酷站其它相关文章！



css怎么实现多边形
—–文章转载自PHP中文网如有侵权请联系ymkuzhan@126.com删除

下载声明：
  • 本站资源如无特殊说明默认解压密码为www.ymkuzhan.com建议使用WinRAR解压；
  • 本站资源来源于用户分享、互换、购买以及网络收集等渠道，本站不提供任何技术服务及有偿服务，资源仅提供给大家学习研究请勿作它用。
  • 赞助本站仅为维持服务器日常运行并非购买程序及源码费用因此不提供任何技术支持，如果你喜欢该程序，请购买正版!
    • 版权声明：
  • 下载本站资源学习研究的默认同意本站【版权声明】若本站提供的资源侵犯到你的权益，请提交版权证明文件至邮箱ymkuzhan#126.com(将#替换为@)站长将会在三个工作日内为您删除。
    • 免责声明：
  • 您好，本站所有资源(包括但不限于：源码、素材、工具、字体、图像、模板等)均为用户分享、互换、购买以及网络收集而来，并未取得原始权利人授权，因此禁止一切商用行为，仅可用于个人研究学习使用。请务必于下载后24小时内彻底删除，一切因下载人使用所引起的法律相关责任，包括但不限于:侵权,索赔,法律责任,刑事责任等相关责任,全部由下载人/使用人,全部承担。以上说明,一经发布视为您已全部阅读，理解、同意以上内容，如对以上内容持有异议，请勿下载，谢谢配合！支持正版，人人有责，如不慎对您的合法权益构成侵犯，请联系我们对相应内容进行删除，谢谢！