1、圆形 示例:　　　　　　　　　 思路：给任何正方形元素设置一个足够大的 border-radius ，就可以把它变成一个圆形.代码如下： html: css: 2、自适应椭圆 思路：border-radius 这个属性还有另外一个鲜为人知的真相 ...

由于近期的项目中出现了不规则的边框和图形， 所以只好提前先温习一下，以前收集的一些CSS3绘制的图形。。。样式绘制的图形比图片的性能要好，体验更佳。 废话不多说，我们直接看效果： 1、三角形系列（三角形、倒三角、左三角、右三角、左上三角、右上三角、左下三角、右下三角） 主要 ...

前言：最近准备做一个自己的网页，设计稿中导航我准备设计成矩形，也有hover样式展示的矩形，当中一些头像等等。以前除了画圆，好像真没认真画过其他图形，今天就画画我们常见到的几个图形。 在此之前我们有必要了解下什么是伪元素(和它不同的，还有一个概念叫伪类，两者容易混淆)，没有它画不成图形 ...

.path1 { clip-path: polygon(5px 10px, 16px 3px, 16px 17px); } .path2 { clip-path: polygon(3p ...

火热的移动互联网让我看到了HTML5，CSS3的伟大前景。 虽然web端对CSS3的支持还有很多兼容性问题，但是我很愿意相信web端越来越富了，越来越生动了。 这是我对他们的学习越来越有兴趣了。 下面是我用CSS3绘制的一个BMW的标志。 浏览器支持：chrome， safari ...

基础技能1 - 神奇的border 我们先来画一个长方形： 有没有发现什么？ 对，四个边的交界处是45°角。那我们可以用这个东东干点什么呢？往下看。 进阶技能1 - 三角 ...

为了在页面中利用CSS3绘制图形，在页面中定义 <div class="container"> <div class="shape"></div> </div> 其中，container作为显示 ...

转：http://blog.csdn.net/tangtang5963/article/details/51490107 　　https://segmentfault.com/a/1190000002780453#articleHeader18 css实现各种图形真是太赞了，再也不用切图 ...