css编写三角形汇总

伪元素：before和after的使用

.container .color-box{
				content: '';
				width:0;
				height:0;
				border:10px solid transparent;
				border-left-color: #abcdef;
				border-right-color: #aabbcc;
				border-top-color: #ddeeff;
				border-bottom-color: #0000ff;
			}

三角形的编写原理是利用block元素的border属性，当border值很小的时候，border之间的连接并无异常，但当border较大，而元素本身的尺寸小于border时，则每一个border都会呈现为梯形，而当width:0;height:0;就会看到一个正方形，而每条边都变成了一个三角形

要想呈现这样类型的对话框的小三角，则是运用了before和after

.container .box-p{
				position: relative;
				border:1px solid #666;
				border-radius: 4px;
				box-shadow: 1px 1px 4px #6b6b6b;
				width: 300px;
				margin-top:10px;
			}
.container .box-p:after,.container .box-p:before{
				position: absolute;
				content: '';
				width: 0;
				height: 0;
				border:solid transparent;
				top:100%;
				left:62%;
			}
			.container .box-p:before{
				border-width: 10px;
				border-top-color: #6b6b6b;
				margin-left: -10px;
			}
			.container .box-p:after{
				border-width: 9px;
				border-top-color: #fff;
				margin-left: -9px;
			}

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAH8AAAA0CAYAAACjIue8AAACoklEQVR4Ae2cYU4EIQyF1XgAvYpeRU+pV9Gr6A3UrnlJHRCBpQXs22TTmQLL9H19rPvHy4+v1wVfIRW4Clk1iz4pQPiBG4HwCT+wAoFLp/MJP7ACgUun8wk/sAKBS6fzCT+wAoFLp/MJP7ACgUu/bq39+fW9dUmo+Q93N9vU23zs71TcDAo7maMZvgjKBii31S4N0AW/XDpHd1GgGz7dX0a8g/u74UvpbIC9G+As+OXSObq6AmfD39H9j/e3P7gc7zH4Wx7jNXHl47/5d36uYGkAryIFyNPL2+kxauBgbu65czn9+bnxnpxos6JJhsDvEaR3jcDUgEpwa5qj9zn+w7qzj32IMLuzARoRz7VK9DoZW+odBl82tWwADRVuR5QxXEvEXORaBLGcu1oDDIVvKZyGqvfR4JHPzZV5eMs8fY110eJw+Jbuz8HR7hageOm85OQeb32P+V5xJfcPhy8iWjUAgGrIXtBG7rNKA2z3176GkGuCYw4No9fx+lsBM/jifosOF7gAigiYegy5VaNoY3VC1tZscuxj85HFCdijq7GPRIwh6rFVry3M0VKrKfyWB/lrrrj86HSsEeAYk1jTADKnZh72+I/R7NiHWFbHPz5fg0cODYCGkLwGrfNYMyvOPP5dnD/y+AckOPc3kGgAQMc8RP05xxzGvOKs49/c+VYC1gA7zjne556tZk5u3Y45F+eLMKPcPxJO7itjFsQZ7r/0/p88M4qcBbRn31Emqdnbzfk1D8M5vgq4w/fsbF8px+zmeTK6wxeJ2ADlRvFqgCnwy6Vz1EuBafDp/jJiD/dPgy+lswHmNoD7T71yuRz1VGCq8z0L5V6pAoSfahImQ/hhUKeFEn6qSZgM4YdBnRZK+KkmYTKEHwZ1Wijhp5qEyXwCoOrazzNBxroAAAAASUVORK5CYII=" alt="" />这种多边形利用伪类也可以轻松的写出来，即两个三角形外加一个矩形即可编写完成

<pre name="code" class="css">.container span.shenzhen{
				background: #abcdef;
				padding:0 10px;
				float: left;
				height:30px;
				line-height: 30px;
				cursor: pointer;
				margin-left:20px;
				position: relative;
			}
			.container span.shenzhen:before,.container span.shenzhen:after{
				position: absolute;
				content: '';
				width: 0;
				height: 0;
				border-style: solid;
				border-width: 15px 10px;
				top:0;
			}
			.container span.shenzhen:before{
				border-color: #abcdef #abcdef transparent transparent;
				left: -20px;
			}
			.container span.shenzhen:after{
				border-color:transparent transparent #abcdef #abcdef ;
				right: -20px;
			}

而实现这种效果相对前面的要复杂，不过也是有办法解决的，仔细看看就知道，图形中有两个三角形和一个矩形

<pre name="code" class="css">.container span.doing{
				background:orange;
				padding:0 20px;
				height:30px;
				line-height: 30px;
				float: left;
				position: relative;
			}
			.container span.doing:before,.container span.doing:after{
				position: absolute;
				content: '';
				width: 0;
				height: 0;
				border:solid transparent;
				top:0%;
				right:0%;
			}
			.container span.doing:before{
				border-width: 15px;
				border-right-color: #fff;
			}
			.container span.doing em.arrow{
				content: '';
				width:0;
				height:0;
				border:4px solid transparent;
				border-right-color: orange;
				border-top-color: orange;
				font-size: 0;
				position: absolute;
				left: 0;
			}