div+css图形设计


<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>
	
		
		<br>
		<div>
		<div class="bb">div>	<div class="dd">技术部div><div class="ff">div><div class="cc">div>
		div>
	body>
html>

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

你可能感兴趣的:(css)