[分享]css3怎么给菱形加边框

在CSS3中，要给菱形添加边框可以使用transform加伪元素的方式实现。 首先定义菱形的样式，使用transform属性将其旋转45度，再用translate属性将其移动到中心位置，并设置菱形的...

在CSS3中，要给菱形添加边框可以使用transform加伪元素的方式实现。
首先定义菱形的样式，使用transform属性将其旋转45度，再用translate属性将其移动到中心位置，并设置菱形的宽高为0，边框宽度为50px，如下所示：

.rhombus {
  width: 0;
  height: 0;
  border: 50px solid #f00;
  position: relative;
  transform: rotate(45deg) translate(-50%, -50%);
} 

接下来，定义伪元素的样式，使用绝对定位将其放置到菱形四个角上，并设置宽高为0和边框宽度为50px，颜色与菱形边框颜色相同，如下所示：

.rhombus:before, .rhombus:after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  border: 50px solid #f00;
}
<br>
.rhombus:before {
  top: -50px;
  left: 0;
  border-top-color: transparent;
  border-right-color: transparent;
}
<br>
.rhombus:after {
  top: 0;
  left: -50px;
  border-right-color: transparent;
  border-bottom-color: transparent;
} 

最后，将伪元素设置为不可见（opacity为0），则只有边框部分会显示出来，完成菱形加边框的效果。
完整代码如下：

<p class="rhombus"></p>
<br>
<style>
.rhombus {
  width: 0;
  height: 0;
  border: 50px solid #f00;
  position: relative;
  transform: rotate(45deg) translate(-50%, -50%);
}
<br>
.rhombus:before, .rhombus:after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  border: 50px solid #f00;
  opacity: 0;  /* 这里设置为不可见 */
}
<br>
.rhombus:before {
  top: -50px;
  left: 0;
  border-top-color: transparent;
  border-right-color: transparent;
}
<br>
.rhombus:after {
  top: 0;
  left: -50px;
  border-right-color: transparent;
  border-bottom-color: transparent;
}
</style>