Проблемы с шестигранными изображениями css? - PullRequest
Новая
       97

Проблемы с шестигранными изображениями css?

0 голосов
/ 29 апреля 2020

Я пытаюсь сделать аватар в виде шестиугольника, для этого я нашел фрагмент 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 Работает, но часть изображения обрезается. Есть идеи, как это решить?

1 Ответ

1 голос
/ 29 апреля 2020

это потому, что шестиугольник-in2 является прямоугольным angular, поместите в его 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>

надеюсь, что это поможет

...