css多边形制作简历小标题二级标题

最新推荐文章于 2023-04-12 23:55:58 发布

金lin

最新推荐文章于 2023-04-12 23:55:58 发布

阅读量290

点赞数

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

本文链接：https://blog.csdn.net/qq_40410916/article/details/120160925

版权

html 同时被 2 个专栏收录

16 篇文章 0 订阅

订阅专栏

css

13 篇文章 0 订阅

订阅专栏

使用css边框绘制加 transform: skewX(45deg);属性实现
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>css多边形</title>
		<style>
			.div {
				width: 100px;
				height: 0;
				border-width: 0 45px 45px;
				border-style: solid;
				border-color: transparent transparent darkred darkred;
				position: relative;
			}

			.div::after {
				position: absolute;
				left: 140px;
				content: "";
				width: 10px;
				height: 0;
				border-style: solid;
				border-width: 0px 0 45px;
				border-color: darkred;
				transform: skewX(45deg);
			}

			.div::before {
				position: absolute;
				left: 170px;
				content: "";
				width: 10px;
				border-style: solid;
				border-width: 0px 0 45px;
				border-color: darkred;
				transform: skewX(45deg);
			}

			.div>span {
				font-size: 20px;
				position: absolute;
				top: 10px;
			}
		</style>
	</head>
	<body>
		<div class="div">
			<span>
				123456
			</span>
		</div>

	</body>
</html>

金lin

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css多边形制作简历小标题二级标题

使用css边框绘制加 transform: skewX(45deg);属性实现<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>css多边形</title> <style> .div { width: 100px; height: 0; border-width: 0 45px 45px; borde
复制链接

扫一扫