首页 >web前端 >前端问答 > 正文

css怎么实现多边形

原创2021-07-22 11:16:590864

css实现多边形的方法:首先创建一个HTML示例文件;然后通过transform的skew属性实现平行四边形;接着用before伪元素实现三角形;最后结合平行四边行和三角形实现多边形即可。

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

css怎么实现多边形?

CSS | 实现有趣的多边形

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

eee59cd368571848811d2e44edad972.png

效果图

“咋实现咋实现”,“有文字斜体向上么”,“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怎么实现多边形的详细内容,更多请关注php中文网其它相关文章!

php中文网直播班

声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理

  • 相关标签:css
  • 相关文章

    相关视频


    网友评论

    文明上网理性发言,请遵守 新闻评论服务协议

    我要评论
  • 专题推荐

    推荐视频教程
  • CSS3 极速入门CSS3 极速入门
  • 玩转CSS Flexbox弹性盒子布局(2021新课)玩转CSS Flexbox弹性盒子布局(2021新课)
  • 让布局像5G一样快:CSS Grid网格布局让布局像5G一样快:CSS Grid网格布局
  • Web开发基础_HTML+CSSWeb开发基础_HTML+CSS
  • 新独孤九贱之:CSS3 必知内容新独孤九贱之:CSS3 必知内容
  • 视频教程分类