div+css图形设计

最新推荐文章于 2021-08-03 21:03:03 发布

摇曳的精灵

最新推荐文章于 2021-08-03 21:03:03 发布

阅读量203

点赞数

文章标签： div+css图形设计

本文链接：https://blog.csdn.net/qq_33271461/article/details/90444723

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
			<style type="text/css">
				.a{
					  width: 100px;
                      height: 20px;
    				  position :relative;
                      border-bottom: 7px solid;
                      border-top: 7px solid;
                      border-left: 30px solid;
                      border-right: 30px solid;
    				  border-color: #4c4743 #fe5e3a #4c4743  #fe5e3a;
    				  position :relative;
				}
.bb{
	float: left;
	background-color: #fe5e3a;;
	 width: 0;
     height: 0;
    border: 20px solid;
    border-color: transparent transparent transparent #4c4743;
}
.cc{
	float: left;
	background-color: #4c4743;
	  width: 0;
      height: 0;
      border-bottom: 20px solid;
      border-top: 20px solid;
      border-left: 20px solid;
      border-right: 10px solid;
      border-color: #fe5e3a #fe5e3a #fe5e3a transparent;
}
.dd{
	float:left;
	background-color: #fe5e3a;;
	width: 50px;
	height:40px;
	text-align: left;
	color: #FFFFFF;
	line-height:35px;
}
.ff{
	float: left;
	background-color: #fe5e3a;
	  width: 0;
      height: 0;
      border-bottom: 20px solid;
      border-top: 20px solid;
      border-left: 20px solid;
      border-right: 5px solid;
      border-color: #4c4743 #4c4743 #4c4743 transparent;
}
</style>
	</head>
	<body>
	<!--	<div class="a">
			div a
		</div>
		<br>
		<div class="b"></div>
		<br>
		<div class="c"></div>
		<br>
		<div class="d"></div>-->
		
		<br>
		<div>
		<div class="bb"></div>	<div class="dd">技术部</div><div class="ff"></div><div class="cc"></div>
		</div>
	</body>
</html>

运行结果：
在这里插入图片描述

摇曳的精灵

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
div+css图形设计

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .a{ width: 100px; height...
复制链接

扫一扫