使用css绘制各种形状

.picture{width:400px;高度：400px；变换：旋转（45度）；溢出：隐藏；}.picture1>img{最大宽度：100%；高度：400px；transform:rotate(-45deg)scale(1.42);}效果如下：缩放和宽度放大的区别：scale缩放后的图像按其中心点进行缩放（在不指定transform-origin的前提下），当通过width属性放大图片时，只会以其左上角的原点进行缩放，然后使用额外的负边距来调整图片的位置。上面的裁剪路径方案的方法还需要在前面设置一层冗余的html标签。使用属性clip-path，本来是svg的一个属性，使用多边形函数polygon()。使用的百分比的值将被解析为一个元素它自己的大小。img{clip-path:polygon(50%0,100%50%,50%100%,050%);}clip-path也可以参与动画，只要动画在同一个shapefunction之间，和点数相同，比如我们想在鼠标悬停的时候平滑的展开到完成的区域，就这样：.picture{clip-path:polygon(50%0,100%50%,50%100%,050%);transition:1sclip-path;}.picture:hover{clip-path:polygon(00,100%0,100%100%,0100%);}切脚效果的实现直径实现转角的效果以渐变的方式切掉，可以使用渐变，渐变接受一个角度作为方向，让文字溢出超出切角区域（因为只是背景图案），具体实现如下:div{背景:#58a;background:linear-gradient(-45deg,transparent15px,#58a0);}效果如下：实现两个切角的方式：div{width:200px;高度：100px；背景：#58a；背景：右线性渐变（-45deg，透明15px，#58a0），左线性渐变（45deg，透明15px，#65a0）；背景大小：50%100%；background-repeat:no-repeat;}效果如下：同理实现四个切角：div{width:200px;高度：100px；背景：#58a；背景：线性渐变（135deg，透明15px，#58a0）左上角，线性渐变（-135deg，透明15px，#58a0)右上，线性渐变（-45deg，透明15px，#58a0）右下，线性渐变（45deg，透明15px，#58a0）左下；背景大小：50%50%；background-repeat:no-repeat;}效果如下：上面的代码可维护性比较差，改变切角和颜色的时候需要修改很多地方，所以我们可以使用scssmixin来写：@mixin斜角($bg,$tl:0,$tr:$tl,$br:$tl,$bl:$tr){背景:$bg;背景：线性渐变（135deg，透明$tl，$bg0）左上，线性渐变（225deg，透明$tr，$bg0）右上，线性渐变（-45deg，透明$br，$bg0）右下，线性渐变（45deg，透明$bl，$bg0）左下；背景大小：50%50%；background-repeat:no-repeat;}调用时：@includebeveled-corners(#58a,15px,5px);最后的效果是左上角和右下角是15px的切角，右上角和左下角是5px的切角。上面的minxin设置了初始值。当输入值小于四个值时，与border-radius赋值相同。同样的道理，我们也可以创建圆弧切角，至少要改为径向渐变div{width:200px;高度：100px；背景：#58a；背景：径向渐变（圆圈在左上角，透明15px，#58a0）左上角，径向渐变（圆圈在右上角，透明15px，#58a0）右上角，径向渐变（圆圈在右下角，透明15px,#58a0)右下角，径向渐变（圆圈在左下角，透明15px,#58a0)左下角；背景大小：50%50%；background-repeat:no-repeat;}效果如下：SVG以inlineSVG和border-image的方式可以实现完美的与size无关的scaling，当文字溢出时，起到a的作用使文本换行的正常边框。具体实现如下：div{width:200px;高度：100px；边框：15px实心透明；border-image:1url('data:image/svg+xml,\\\');}效果如下:解决中间背景色的填充，可以在div块中添加一个与边框相同的背景色：div{width:200px;高度：100px；边框：15px实心透明；border-image:1url(data:image/svg+xml,\\<多边形点="0,11,02,03,13,22,31,30,2"/>\);背景：#58a；background-clip:padding-box;}裁剪路径方案CSS裁剪路径最神奇的地方在于我们可以同时使用百分比值（它会使用元素本身的宽高作为转换的基础度数）和绝对长度值，这提供了很大的灵活性。如果使用裁剪路径裁剪一个20px斜角的元素，具体代码如下：background:#58a;clip-path:polygon(20px0,calc(100%-20px)0,100%20px,100%计算(100%-20px),计算(100%-20px)100%,20px100%,0计算(100%-20px),020px);这种方式最大的优点：可以使用任何类型的背景，甚至可以裁剪替换元素（比如图片），支持动画效果。缺点：当填充不够宽时，它会切断文本。梯形标签页的实现梯形的实现可以通过div{position:relative;显示：内联块；填充：.5em1em.35em；颜色：白色；}div::before{内容：''；位置：绝对；顶部：0；右：0；底部：0；左：0；z-指数：-1；背景：#58a；变换：scaleY(1.3)perspective(.5em)rotateX(5deg)；transform-origin:bottom;}效果如下：变形效果会让这个元素围绕自己的中心线在空间中旋转，这样会导致它的尺寸难以控制。解决方法可以设置transform-origin:bottom;当它在3D空间中时旋转它时按住它的底部边缘。在固定底部边缘的同时，高度的收缩变得更加明显。为了解决这个问题，可以通过变形属性（scaleY()）改变它的大小。同样的方法可以实现如下tab布局：具体代码如下：nav>a{position:relative;显示：内联块；padding:.3em1em0;}nav>a::before{content:'';位置：绝对；顶部：0；右：0；底部：0；左：0；z-指数：-1；背景：#ccc；背景图像：线性渐变（hsla（0,0%，100%，.6），hsla（0,0%，100%，0））；border:1pxsolidrgba(0,0,0,.4);底部边框：无；边界半径：.5em.5em00；框阴影：0.15em白色插图；变换：透视（.5em）旋转X（5deg）；transform-origin:bottom;}通过将transform-origin更改为左下角或右下角，您可以立即获得向左倾斜或向右倾斜的标签。这种方法的缺点是斜边的角度取决于元素的宽度。但是，这种方法适用于宽度变化不大的多个元素，例如导航菜单。画一个简单的饼图的思路就是把圆的左右部分指定为上面两种颜色，然后用伪元素覆盖，通过旋转来决定露出多少扇区。具体代码如下：.pie{width:100px;高度：100px；边界半径：50%；背景：黄绿色；背景图像：线性渐变（向右，透明50%，#6550）；.pie::before{内容:'';显示：块；左边距：50%；高度：100%；边界半径：0100%100%0/50%；背景色：继承；变换原点：左；}实现的效果如下：该方法还支持动画，可以使用CSS动画实现饼图从0到100%变化的动画，从而得到炫酷的进度条：@keyframesspin{to{transform：旋转（.5圈）；}}@keyframesbg{50%{背景：#655；}}.pie::before{内容：'';显示：块；左边距：50%；高度：100%；-半径：0100%100%0/50%；背景色：继承；变换原点：左；animation:spin3slinearinfinite,bg6sstep-endinfinite;}生成多个不同比例的静态饼图方法可以通过上面的动画实现，需要设置动画处于暂停状态，然后设置一个负动画延迟直接跳转到动画中的任意点。最终代码如下：20