CSS 不规则的标题框样式

最新推荐文章于 2024-09-02 18:56:47 发布

太阳的后裔

最新推荐文章于 2024-09-02 18:56:47 发布

阅读量774

点赞数

分类专栏： CSS Web 文章标签： css css3 html

本文链接：https://blog.csdn.net/weixin_43942765/article/details/126538473

版权

Web 同时被 2 个专栏收录

33 篇文章 4 订阅

订阅专栏

CSS

16 篇文章 2 订阅

订阅专栏

小编是经常会遇见奇奇怪怪的设计，每次看到这种很多不规则的设计时，小编就免不了头疼一会儿，为什么？因为又要写CSS了，来吧今天展现一个框框的demo，难点就在于不规则的标题框这里，像是一个长方形减去了一个梯形，然后在梯形中添加两个按钮，按钮还要显示成平行四边形，其他的都简单
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.headerbannner{
				width: 780px;
				height: 500px;
				box-shadow: 2px 2px 5px #000000;
				border-radius: 10px 0px 10px 10px;
			}
			.demoleft,.demomiddle,.demoright{
				float: left;
			}
			.demoleft{
				width: 300px;
				height: 50px;
				background: #3476d6;
				line-height: 50px;
			}
			.demoright{
				width: 150px;
				height:50px;
				background: #3476d6;
			}
			.demomiddle{
				width: 300px;
				height: 0;
				position: relative;
				background-color: #3476d6;
				border-bottom: 35px solid white;
				border-left: 15px solid #3476d6;
				border-right: 15px solid #3476d6;
				padding-top: 15px;
			}
			._divtitle {
			    font-size: 30px;
			    font-family: PingFang SC;
			    font-weight: bold;
			    color: #FFFFFF;
			    float: left;
			    margin-left: 5px;
			}
			.demoleft:before{
				content: "|";
				color: white;
				font-size: 34px;
				line-height: 43px;
				float: left;
				margin-left: 5px;
				font-weight: 550;
			}
			.btnon{
				background-color: #ffa303;
				width: 80px;
				height: 34px;
				border-color: #ffa303;
				transform: skew(-22deg);
				margin-top: 1px;
				margin-left: -6px;
				color: white;
				line-height: 0px;
				font-weight: bold;
				font-size: 20px;
				text-decoration:underline;
				text-underline-offset: 4px;
			}
			._btn_text{
				display: block;
				transform: skew(22deg);
			}
			._btns{
				margin-left: -3px;
			}
		</style>
	</head>
	<body>
		<div class="headerbannner">
			<div class="demoleft"><label class="_divtitle">学习数据统计</label></div>
			<div class="demomiddle">
				<button class="btnon"><label class="_btn_text">近七天</label></button>
				<button class="btnon _btns"><label class="_btn_text">本月</label></button>
			</div>
			<div class="demoright"></div>
		</div>
	</body>
</html>