实现方式是通过border-radius这个属性；border-radius它可以单独指定水平和垂直半径。用 / 分隔这两个值。并且该属性的值不仅可以接受长度值，还能接收百分比的值。百分比的值会基于元素的尺寸进行解析，宽是水平半径的解析，高是垂直半径的解析。
所以可以把两个半径的值都设置成50%；
border-radius: 50% / 50%; /* 值都是50% 就可以简化成 border-radius: 50%; */最终的效果：
2.半椭圆的实现
border-radius的值是可以分开设置的，用空格进行分开，甚至可以为四个角提供完全不同的水平和垂直的半径。
border-radius四个值的渲染顺序是从左上角开始，顺时针渲染；
当只给定3个值时，第四个值和第二个相等；
当给定两个值时，第三个值和第一个值相等，第四个值和第二个值相等。
所以半椭圆的实现方法就是：
border-radius: 50% / 100% 100% 0 0; /* * 会解析成下面的样子 border-top-left-radius: 50% 100%; border-top-right-radius: 50% 100%; border-bottom-right-radius: 50% 0px; border-bottom-left-radius: 50% 0px; */最终效果：
同理的四分之一的椭圆的生成方法：
/* 不能设置圆角的就设置成 0 */ border-radius: 100% 0 0 0;最终效果：
在生成平行四边形时，直接对当前对div使用transform: skew(-45deg);变形，会导致div里面的内容也会发生变形，就像下面这样：
通用的解决办法是通过伪元素的方法，就是把所有的样式用到伪元素上，对伪元素进行变形，由于内容不在伪元素里，所以内容不会受到影响。具体的实现如下：
<div class="parallelogram"> click </div> .parallelogram { text-align: center; position: relative; } .parallelogram::before { transform: skew(-45deg); position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: -1; content: ' '; background: #fb3; }生成的效果如下：
这种技巧不仅对于skew()变形来说有用，还适用于其他任何变形样式，当想变形任何一个元素而不想改变它的内容的时候都可以用到它。
菱形图片的生成在css中，有些需求是要把图片裁剪成菱形，使用css可以很好的解决这个问题，为不需要预先把图片裁剪成菱形而影响后期的维护。
基于变形的方案
直接使用类似平行四边形的方式旋转，给img设置max-width: 100%，会导致图片被裁剪成八边形。因为100%会被解析成div的边长。所以解决这个问题的办法就是让图片的宽等于div这个容器的对角线的长度，比较好的办法就是把图片用scale放大根号2倍（大概是1.42倍），具体实现的代码如下：
<div class="picture"> <img src="cat.jpg" /> </div> .picture { width: 400px; height: 400px; transform: rotate(45deg); overflow: hidden; } .picture1 > img { max-width: 100%; height: 400px; transform: rotate(-45deg) scale(1.42); }效果如下：
scale和width放大的区别：scale的缩放图片是以它的中心点进行缩放的（在不指定transform-origin的前提下），通过width属性来放大图片时，只会以它左上角的原点进行缩放，然后用额外的负边距来调整图片的位置。
裁切路径方案上面的办法还需要前套一层多余的html标签，使用clip-path这个属性，这个原本是svg的属性，使用polygon()这个多边形的函数，使用的百分比的值会解析为元素自身的尺寸。
img { clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }clip-path这个属性还能参与动画，只要动画是在同一个形状函数之间进行的，而且点的数量是相同的就可以，比如我们希望鼠标hover时平滑的扩展为完成的面积，只需这样：
.picture { clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); transition: 1s clip-path; } .picture:hover { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); } 切脚效果的实现径向渐变的方式
(责任编辑：admin)