今天，我们利用CSS实现六边形，具体代码如下：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>CSS基本形状——六边形</title> <style type="text/css"> * { margin:40px; padding:0px; } .line-six { width: 120px; height: 60px; position: relative; background-color: red; } .line-six::before { content: ""; height: 0; width: 0; border-left: 60px solid transparent; border-right: 60px solid transparent; border-bottom: 40px solid red; position: absolute; top: -40px; } .line-six::after { content: ""; height: 0; width: 0; border-left: 60px solid transparent; border-right: 60px solid transparent; border-top: 40px solid red; position: absolute; top: 60px; }</style></head><body> <div class="line-six"></div></body></html>
实现效果：
