虽然感觉代码有点二，效果终就实现了
请css高手不吝指点，谢谢
1 #six_border_red, #six_border_black, #six_border_pink, #six_border_purple, #six_border_green, #six_border_gray { 2 color:white; 3 height: 60px; 4 width:30px; 5 line-height: 60px; 6 float:left; 7 text-align:center; 8 position: relative; 9 margin-top:5px; 10 clear:both; 11 } 12 /**控制左右三角形*/ 13 #six_border_red:before { 14 content: ""; 15 position: absolute; 16 left: -15px; 17 top: 0; 18 width: 0; 19 height: 0; 20 border-top: 30px solid transparent; 21 border-bottom: 30px solid transparent; 22 border-right: 15px solid red; 23 } 24 #six_border_red:after { 25 content: ""; 26 position: absolute; 27 right: -15px; 28 bottom: 0; 29 width: 0; 30 height: 0; 31 border-top: 30px solid transparent; 32 border-bottom: 30px solid transparent; 33 border-left: 15px solid red; 34 } 35 36 /**控制左右三角形*/ 37 #six_border_black:before { 38 content: ""; 39 position: absolute; 40 left: -15px; 41 top: 0; 42 width: 0; 43 height: 0; 44 border-top: 30px solid transparent; 45 border-bottom: 30px solid transparent; 46 border-right: 15px solid black; 47 } 48 #six_border_black:after { 49 content: ""; 50 position: absolute; 51 right: -15px; 52 bottom: 0; 53 width: 0; 54 height: 0; 55 border-top: 30px solid transparent; 56 border-bottom: 30px solid transparent; 57 border-left: 15px solid black; 58 } 59 60 /**控制左右三角形*/ 61 #six_border_purple:before { 62 content: ""; 63 position: absolute; 64 left: -15px; 65 top: 0; 66 width: 0; 67 height: 0; 68 border-top: 30px solid transparent; 69 border-bottom: 30px solid transparent; 70 border-right: 15px solid purple; 71 } 72 #six_border_purple:after { 73 content: ""; 74 position: absolute; 75 right: -15px; 76 bottom: 0; 77 width: 0; 78 height: 0; 79 border-top: 30px solid transparent; 80 border-bottom: 30px solid transparent; 81 border-left: 15px solid purple; 82 } 83 /**控制左右三角形*/ 84 #six_border_pink:before { 85 content: ""; 86 position: absolute; 87 left: -15px; 88 top: 0; 89 width: 0; 90 height: 0; 91 border-top: 30px solid transparent; 92 border-bottom: 30px solid transparent; 93 border-right: 15px solid pink; 94 } 95 #six_border_pink:after { 96 content: ""; 97 position: absolute; 98 right: -15px; 99 bottom: 0; 100 width: 0; 101 height: 0; 102 border-top: 30px solid transparent; 103 border-bottom: 30px solid transparent; 104 border-left: 15px solid pink; 105 } 106 107 /**控制左右三角形*/ 108 #six_border_green:before { 109 content: ""; 110 position: absolute; 111 left: -15px; 112 top: 0; 113 width: 0; 114 height: 0; 115 border-top: 30px solid transparent; 116 border-bottom: 30px solid transparent; 117 border-right: 15px solid green; 118 } 119 #six_border_green:after { 120 content: ""; 121 position: absolute; 122 right: -15px; 123 bottom: 0; 124 width: 0; 125 height: 0; 126 border-top: 30px solid transparent; 127 border-bottom: 30px solid transparent; 128 border-left: 15px solid green; 129 } 130 /**控制左右三角形*/ 131 #six_border_gray:before { 132 content: ""; 133 position: absolute; 134 left: -15px; 135 top: 0; 136 width: 0; 137 height: 0; 138 border-top: 30px solid transparent; 139 border-bottom: 30px solid transparent; 140 border-right: 15px solid gray; 141 } 142 #six_border_gray:after { 143 content: ""; 144 position: absolute; 145 right: -15px; 146 bottom: 0; 147 width: 0; 148 height: 0; 149 border-top: 30px solid transparent; 150 border-bottom: 30px solid transparent; 151 border-left: 15px solid gray; 152 } 153 .color_red { 154 background-color: red; 155 } 156 157 .color_black { 158 background-color: black; 159 } 160 161 .color_purple { 162 background-color: purple; 163 } 164 165 .color_pink { 166 background-color: pink; 167 } 168 169 .color_green { 170 background-color: green; 171 } 172 173 .color_gray { 174 background-color: gray; 175 } 176 .six_vertical_item0 { 177 width: 65px; margin-left: 20px; 178 float: left; 179 } 180 181 .six_vertical_item1 { 182 position: absolute; 183 margin-top: 33px; 184 width: 65px; 185 left: 80px; 186 float:left; 187 } 188 189 .six_vertical_item2 { 190 margin-top: 33px; 191 position: absolute; 192 width: 65px; 193 left: 176px; 194 float:left; 195 }
1 <div style="margin-top: 100px; margin-left:100px; z-index: 1000000; height: 400px; width: 540px;"> 2 <div class="six_vertical_item0"> 3 <div class="color_red" id="six_border_red"><a href="a">红色</a></div> 4 <div class="color_black" id="six_border_black"><a href="a">黑色</a></div> 5 </div> 6 <div class="six_vertical_item1"> 7 <div class="color_purple" id="six_border_purple"><a href="a">紫色</a></div> 8 <div class="color_pink" id="six_border_pink"><a href="a">粉色</a></div> 9 </div> 10 <div class="six_vertical_item2"> 11 <div class="color_green" id="six_border_green"><a href="a">绿色</a></div> 12 <div class="color_gray" id="six_border_gray"><a href="a">灰色</a></div> 13 </div> 14 </div>
效果：
