css图片斜角

斜角

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
		<style type="text/css">
			div {
				width: 100px;
				height: 100px;
				/* border-radius: 15px; */
				/* corner-shape: bevel; */
				/* background-clip: padding-box; */
				background: url('https://pic.cnblogs.com/avatar/2042148/20210712133320.png') center/cover no-repeat;
				clip-path: polygon( 20px 0, calc(100% - 20px) 0, 100% 20px,
				                    100% calc(100% - 20px), calc(100% - 20px) 100%,
				                    20px 100%, 0 calc(100% - 20px), 0 20px
				);
			}
		</style>
	</head>
	<body>
		<div id="login_container" title="内容"></div>
	</body>
</html>
posted @ 2021-07-12 15:34  小泽沐优声  阅读(132)  评论(0)  编辑  收藏  举报