clip-path
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/*Circle: circle(radius at x-axis y-axis)
Ellipse: ellipse(x-rad y-rad at x-axis y-axis)
Polygon: polygon(x-axis y-axis, x-axis y-axis, … )
Inset: inset(top rightright bottombottom left round top-radius rightright-radius bottombottom-radius left-radius) 先截取然后在机上圆角*/
.clip{width:200px;height:200px;-webkit-clip-path: polygon(0px 0px, 100px 87px,24px 104px);clip-path: polygon(0px 0px, 100px 87px,24px 104px);background:#f60;}
.clip2{width:200px;height:200px;-webkit-clip-path:circle(50% at 50% 50%);clip:circle(50% at 50% 50%);clip-path:circle(50% at 50% 50%);background:#ccc;}
.clip3{width:200px;height:200px;-webkit-clip-path:ellipse(50% 20% at 50% 50%);background:green;}
.clip4{width:200px;height:200px;-webkit-clip-path:inset(10px 50px 0px 50px round 10px 20px);background:#000;}
.star{width:100px;height:100px;
-webkit-clip-path:polygon(50% 0%, 63% 38%, 100% 38%, 69% 59%, 82% 100%, 50% 75%, 18% 100%, 31% 59%, 0 38%, 37% 38%);
clip-path:polygon(50% 0%, 63% 38%, 100% 38%, 69% 59%, 82% 100%, 50% 75%, 18% 100%, 31% 59%, 0 38%, 37% 38%);
background:#f50c27;
}
.clip5{width:300px;height:300px;-webkit-clip-path:url("#svgPath2");background:#f60;}
.svg-clipped {-webkit-clip-path: url("#svgPath");clip-path: url("#svgPath");position:absolute;}
</style>
</head>
<body>
<div class="clip5"></div>
<div style="width:500px;height:500px;">
<img class="svg-clipped" alt="Cherry Blossoms." src="flowers.jpg">
<svg height="0" width="0">
<defs>
<clipPath id="svgPath2">
<text font-style="italic" font-weight="700" font-size="150px" font-family="微软雅黑" lengthAdjust="spacing" textLength="800" y="300" x="0"> Blossom </text>
</clipPath>
<clipPath id="svgPath">
<text font-style="italic" font-weight="700" font-size="150px" font-family="微软雅黑" lengthAdjust="spacing" textLength="800" y="500" x="0"> Blossom </text>
</clipPath>
</defs>
</svg>
</div>
<input type="text" placeholder="xdsadsadsa">
<div style="color:#f60">style="color:#f60"</div>
<div class="clip"></div>
<div class="clip2"></div>
<div class="clip3"></div>
<div class="clip4"></div>
<div class="star"></div>
</body>
</html>
