六邊形圖像 css 的問題？

Question

我正在嘗試將頭像制作為六邊形，我找到了一個 css 片段來執行此操作，但它僅適用於非方形圖像：

 .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 ，它起作用了，但是圖像的一部分被裁剪了。 知道如何解決這個問題嗎？

Answer 1

那是因為hexagon-in2是長方形的，把他的css class放進去：

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>

希望它會有所幫助