CSS是用于网页排版的样式表语言,可以使网页设计更加美观、精准。其中,六边形是一种有着六个边的多边形,它有着特殊的外观,被广泛用于设计和排版中。本文将介绍如何使用CSS为六边形添加边框。
/* 1. 定义六边形的基本属性 */ .hexagon { width: 150px; /* 设置宽度 */ height: 86.6px; /* 设置高度,等于width*squre(3)/2 */ position: relative; /* 定位为相对定位 */ background-color: #ccc; /* 设置背景色 */ clip-path: polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%); /* 使用clip-path属性裁剪成六边形 */ } /* 2. 给六边形添加边框 */ .hexagon::before,.hexagon::after { content: ''; /* 伪元素必须有content属性 */ position: absolute; /* 定位为绝对定位 */ width: 0; border-left: 75px solid transparent; /* 给左边框设置透明 */ border-right: 75px solid transparent; /* 给右边框设置透明 */ } .hexagon::before { bottom: 100%; /* 定义位置为六边形的底部 */ border-bottom: 43.3px solid #bbb; /* 给下边框设置颜色 */ } .hexagon::after { top: 100%; /* 定义位置为六边形的顶部 */ width: 0; border-top: 43.3px solid #bbb; /* 给上边框设置颜色 */ } /* 3. 完成六边形的样式 */ .hexagon { display: flex; /* 设为弹性盒子 */ justify-content: center; /* 搭配弹性盒子水平居中 */ align-items: center; /* 搭配弹性盒子垂直居中 */ } .hexagon p { margin: 0; /* 去除默认外边距 */ text-align: center; /* 文本居中 */ font-size: 20px; /* 文本大小 */ color: #333; /* 文本颜色 */ }
六边形加边框