Как лучше сверстать многоугольник подобного плана с изображением внутри? Изначально изображение квадратное.
Ответ
Вот рабочий вариант:
.polygon {
position: relative;
margin: 0 auto;
width: 200px;
height: 220px;
overflow: hidden;
}
.cover {
position: absolute;
width: 200px;
height: 220px;
left: 0;
top: 0;
z-index: 2;
}
.count {
position: absolute;
right: 0;
top: 0;
background: red;
padding: 10px 25px;
color: #fff;
font-weight: bold;
font-family: Arial;
font-size: 1.4em;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
z-index: 3;
}
.image {
position: absolute;
width: 104%;
height: 104%;
left: -2%;
top: -1%;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
Я специально не вставлял SVG файлом, чтоб вы могли подобрать нужные цвета, думаю, что с этим проблем не возникнет. Если не хочется долбать браузеры отрисовкой svg объектов, можно сделать обычный png-файл и наложить его по тому же принципу.
Комментариев нет:
Отправить комментарий