css

最新推荐文章于 2024-05-23 17:56:03 发布

GuaX

最新推荐文章于 2024-05-23 17:56:03 发布

阅读量58

点赞数

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/m0_37714008/article/details/113700654

版权

css 专栏收录该内容

3 篇文章 1 订阅

订阅专栏

ennnn 就随便写写

图：

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>JS</title>
</head>
<style>
	* {
		margin: 0;
		padding: 0;
	}

	.container {
		margin: auto;
		width: 2000px;
		display: flex;
		flex-direction: row;
	}

	.container div {
		margin: 40px 20px;
	}

	.box {
		width: 100px;
		height: 100px;
		overflow: hidden;
		position: relative;
	}

	.a {
		width: 180px;
		height: 100px;
		border-radius: 50%;
		background: pink;
		position: absolute;
		z-index: -1;
		left: -60px;
		top: -55px;
	}

	.triangle {
		width: 0;
		height: 0;
		border: 20px solid transparent;
		border-bottom-color: thistle;
	}

	.cicle {
		background-color: teal;
		height: 40px;
		width: 40px;
		border-radius: 40px 0 0 0;
	}

	.arc {
		background-color: tan;
		height: 40px;
		width: 40px;
		border-radius: 40px 0;
		transform: rotate(45deg);
	}

	.message {
		height: 40px;
		width: 100px;
		border-radius: 15px;
		position: relative;
		background-color: slategrey;
		line-height: 40px;
		text-align: center;
		color: #fff;
	}

	.message::before {
		position: absolute;
		content: "";
		height: 0px;
		width: 0px;
		border: 10px solid transparent;
		border-top-color: slategrey;
		top: 40px;
		left: 25px;
	}

	.rectangle {
		width: 40px;
		height: 0px;
		border: 20px solid teal;
		border-color: transparent transparent teal;
	}

	.ball {
		height: 40px;
		width: 40px;
		border-radius: 50%;
		background: radial-gradient(circle at 40px 40px, tan, #fff)
	}

	.rhombua {
		height: 30px;
		width: 30px;
		transform: rotateZ(43deg) skew(30deg, 30deg);
		background-color: aquamarine;
	}

	.hert {
		height: 30px;
		width: 30px;
		background-color: red;
		transform: rotateZ(45deg);
	}

	.hert::after,
	.hert::before {
		content: "";
		width: 100%;
		height: 100%;
		border-radius: 50%;
		display: inline-block;
		background-color: red;
	}

	.hert::after {
		position: absolute;
		left: 0px;
		top: -50%;
	}

	.hert::before {
		position: relative;
		top: 0%;
		left: -50%;
	}

	/* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 */
	/* box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2); */
	.shadow {
		height: 40px;
		width: 100px;
		box-shadow: 0px 0px 10px thistle;
		border: none;
		font-size: 10px;
		text-indent: 0em;
		text-align: center;
		line-height: 20px;
	}

	.boxColor {
		background-clip: text;
		-webkit-background-clip: text;
		color: transparent;
		height: 40px;
		width: 200px;
		background-image: url('./2.png');
		background-size: cover;
	}


	#star-five {
		margin: 50px 0;
		position: relative;
		display: block;
		color: slategrey;
		width: 0px;
		height: 0px;
		border-right: 50px solid transparent;
		border-bottom: 35px solid slategrey;
		border-left: 50px solid transparent;
		-moz-transform: rotate(35deg);
		-webkit-transform: rotate(35deg);
		-ms-transform: rotate(35deg);
		-o-transform: rotate(35deg);
	}

	#star-five:before {
		border-bottom: 40px solid slategrey;
		border-left: 15px solid transparent;
		border-right: 15px solid transparent;
		position: absolute;
		height: 0;
		width: 0;
		top: -23px;
		left: -34px;
		display: block;
		content: '';
		-webkit-transform: rotate(-35deg);
		-moz-transform: rotate(-35deg);
		-ms-transform: rotate(-35deg);
		-o-transform: rotate(-35deg);

	}

	#star-five:after {
		position: absolute;
		display: block;
		color: slategrey;
		top: 3px;
		left: -54px;
		width: 0px;
		height: 0px;
		border-right: 50px solid transparent;
		border-bottom: 35px solid slategrey;
		border-left: 50px solid transparent;
		-webkit-transform: rotate(-70deg);
		-moz-transform: rotate(-70deg);
		-ms-transform: rotate(-70deg);
		-o-transform: rotate(-70deg);
		content: '';
	}
</style>

<body>
	<div class="container">
		<div class="box">
			<div class="a"></div>
		</div>
		<div class="triangle"></div>
		<div class="cicle"></div>
		<div class="arc"></div>
		<div class="message">消息框</div>
		<div class="rectangle"></div>
		<div class="ball"></div>
		<div class="rhombua"></div>
		<div class="hert"></div>
		<div class="shadow"> box-shadow around it.</div>
		<div class="boxColor">
			背景色字体前景色咔咔咔咔咔咔扩扩扩扩扩
		</div>
		<div id="star-five">
		</div>
	</div>
</body>

</html>

GuaX

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css

ennnn 就随便写写图：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>JS</title></head><style> * {..
复制链接

扫一扫