css编写三角形汇总

来源：互联网发布：java获取ip 端口号编辑：程序博客网时间：2024/05/29 16:29

伪元素：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;}

0 0