使用SVG：

这里有一个使用SVG的替代解决方案(尽管您还没有标记它)。使用SVG的优点是：与径向梯度相比，它具有更好的浏览器支持.

SVG可以支持图像内部的形状，不像盒阴影的方法。

虽然<=IE8不支持SVG，而框影支持SVG，但是可以提供后援。svg {

height: 150px;

width: 150px;}polygon {

fill: black;}/* Just for demo */body {

background-image: radial-gradient(circle, #3F9CBA 0%, #153346 100%);}

使用CSS：

CSS也有clip-path规范以及我们可以在下面的片段中尝试类似的内容。.shape {

position: relative;

width: 100px;

height: 100px;

background-color: purple;}.shape:after {

position: absolute;

content: '';

top: 0px;

left: 0px;

height: 100%;

width: 100%;

background: white;

-webkit-clip-path: ellipse(50% 20% at 50% 0%);

clip-path: ellipse(50% 20% at 50% 5%);}.shape.image{

background: url(http://lorempixel.com/100/100);}#shape-2 {

width: 100px;

height: 100px;

background-color: purple;

-webkit-clip-path: ellipse(50% 20% at 50% 20%);

clip-path: ellipse(50% 20% at 50% 20%);}/* Just for demo */.shape{

float: left;

margin: 20px;}#shape-2 {

margin: 150px 20px 0px;}

但与svg剪辑路径不同，纯css版本(即不使用内联或外部svg)似乎无法支持path..它只支持形状，因此在本例中，如果使用clip-path直接在父服务器上生成一个椭圆(如代码片段中所示)。要克服这一问题，我们必须将剪辑路径放在子元素(或伪元素)上，这意味着剪裁区域不透明.

使用画布：

使用画布也可以这样做。Canvas命令与SVG非常相似，它们的优点也非常相似。然而，画布是基于光栅的，因此比不上SVG。window.onload = function() {

/* Canvas example with path */

var canvas = document.getElementById('canvas');

if (canvas.getContext) {

var ctx = canvas.getContext('2d');

var img = new Image();

img.src = 'http://lorempixel.com/150/300';

ctx.beginPath();

ctx.moveTo(110, 0);

ctx.arc(60, 0, 50, 0, 3.14, false);

ctx.lineTo(10, 145);

ctx.lineTo(110, 145);

ctx.closePath();

ctx.fill();

/* Use below for using image as a fill */

/*img.onload = function(){

var ptrn = ctx.createPattern(img,'no-repeat');

ctx.fillStyle = ptrn;

ctx.fill();

}*/

}

/* Canvas example with clip path */

var canvasClip = document.getElementById('canvas-clip');

if (canvasClip.getContext) {

var ctxClip = canvasClip.getContext('2d');

ctxClip.beginPath();

ctxClip.moveTo(10, 145);

ctxClip.lineTo(10, 0);

ctxClip.arc(60, 0, 50, 0, Math.PI * 2, true);

ctxClip.lineTo(110, 145);

ctxClip.lineTo(10, 145);

ctxClip.clip();

ctxClip.fillStyle = 'tomato';

ctxClip.fill();

}}canvas {

height: 150px;

width: 300px;}/* Just for demo */body {

background-image: radial-gradient(circle, #3F9CBA 0%, #153346 100%);}

使用面具:

还可以使用CSS(或)SVG掩码创建此形状。CSS掩码支持很差，目前只在Webkit支持的浏览器中工作，但是SVG掩码支持得更好，应该在IE9+中工作。/* CSS Mask */.shape {

width: 150px;

height: 150px;

background-color: black;

-webkit-mask-image: radial-gradient(circle closest-corner at 50% 0%, transparent 98%, white 99%);

mask-image: radial-gradient(circle closest-corner at 50% 0%, transparent 98%, white 99%);}/* End of CSS Mask */svg {

height: 150px;

width: 150px;}polygon#shape {

fill: black;

mask: url(#masker);}/* Just for demo */body {

background-image: radial-gradient(circle, #3F9CBA 0%, #153346 100%);}