六边形图像css的问题？答案

【问题标题】：Problems with hexagon images css?六边形图像css的问题？
【发布时间】：2020-08-13 13:31:25
【问题描述】：

我正在尝试将头像制作为六边形，我找到了一个 css sn-p 来做这个，但它只适用于非方形图像：

.hexagon {
  overflow: hidden;
  visibility: hidden;
  -webkit-transform: rotate(120deg);
  -moz-transform: rotate(120deg);
  -ms-transform: rotate(120deg);
  -o-transform: rotate(120deg);
  transform: rotate(120deg);
  cursor: pointer;
}
.hexagon-in1 {
  overflow: hidden;
  width: 100%;
  height: 100%;
  -webkit-transform: rotate(-60deg);
  -moz-transform: rotate(-60deg);
  -ms-transform: rotate(-60deg);
  -o-transform: rotate(-60deg);
  transform: rotate(-60deg);
}
.hexagon-in2 {
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: 50%;
  background-size: contain;
  visibility: visible;
  -webkit-transform: rotate(-60deg);
  -moz-transform: rotate(-60deg);
  -ms-transform: rotate(-60deg);
  -o-transform: rotate(-60deg);
  transform: rotate(-60deg);
}
.hexagon1 {
  width: 80px;
  height: 50px;
}

 <div class="hexagon hexagon1">
    <div class="hexagon-in1">
      <div class="hexagon-in2" style="background-image:url('https://media-exp1.licdn.com/dms/image/C560BAQG-vLQJr3J3zg/company-logo_200_200/0?e=2159024400&v=beta&t=cXNxHCDmX7A_e_LGk75XIbL-eVc7VYdHQfSFH39r3Qo')"></div>
    </div>
 </div>
 <br />
 <div class="hexagon hexagon1">
    <div class="hexagon-in1">
      <div class="hexagon-in2" style="background-image:url('https://poemesurleprophete.com/wp-content/uploads/2018/09/la-seule-force.jpg')"></div>
    </div>
 </div>

如您所见，对于宽度等于高度的图像，它不完全是六边形，我尝试将background-size 设置为cover，它有效，但部分图像被裁剪。知道如何解决这个问题吗？

【问题讨论】：

改用剪辑路径：bennettfeely.com/clippy
@TemaniAfif 非常感谢，我以前不知道clip-path 属性，这是一个更优雅的解决方案，最后我使用了它。

标签： html css image avatar

【解决方案1】：

因为hexagon-in2是矩形的，放在他的css类里：

width:72%;
margin:0 14%;
background-size:cover;

它看起来像：

.hexagon {
  overflow: hidden;
  visibility: hidden;
  -webkit-transform: rotate(120deg);
  -moz-transform: rotate(120deg);
  -ms-transform: rotate(120deg);
  -o-transform: rotate(120deg);
  transform: rotate(120deg);
  cursor: pointer;
}
.hexagon-in1 {
  overflow: hidden;
  width: 100%;
  height: 100%;
  -webkit-transform: rotate(-60deg);
  -moz-transform: rotate(-60deg);
  -ms-transform: rotate(-60deg);
  -o-transform: rotate(-60deg);
  transform: rotate(-60deg);
}
.hexagon-in2 {
  width: 72%;
  margin: 0 14%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: 50%;
  background-size: cover;
  visibility: visible;
  -webkit-transform: rotate(-60deg);
  -moz-transform: rotate(-60deg);
  -ms-transform: rotate(-60deg);
  -o-transform: rotate(-60deg);
  transform: rotate(-60deg);
}
.hexagon1 {
  width: 80px;
  height: 50px;
}

 <div class="hexagon hexagon1">
    <div class="hexagon-in1">
      <div class="hexagon-in2" style="background-image:url('https://media-exp1.licdn.com/dms/image/C560BAQG-vLQJr3J3zg/company-logo_200_200/0?e=2159024400&v=beta&t=cXNxHCDmX7A_e_LGk75XIbL-eVc7VYdHQfSFH39r3Qo')"></div>
    </div>
 </div>
 <br />
 <div class="hexagon hexagon1">
    <div class="hexagon-in1">
      <div class="hexagon-in2" style="background-image:url('https://poemesurleprophete.com/wp-content/uploads/2018/09/la-seule-force.jpg')"></div>
    </div>
 </div>

希望对你有帮助

【讨论】：