CSS Заменяет список Bullet With Polygon Custom Bullet (Масштабируемый)

Моя конечная цель - создать пулю, которую можно масштабировать в зависимости от разрешения экрана.CSS Заменяет список Bullet With Polygon Custom Bullet (Масштабируемый)

Я знаю, что в некоторых аспектах CSS вы можете импортировать большое изображение внутри контейнера, который можно масштабировать, или использовать изображения с несколькими размерами и отображать правильные в зависимости от разрешения экрана.

Ниже приведен простой пример использования изображения.

li { 
 
\t list-style-type: square; /* Default */ 
 
\t list-style-image: url("http://i.stack.imgur.com/gtv3o.jpg"); /* Custom */ 
 
}

<!doctype html> 
 
<html> 
 
<head> 
 
</head> 
 
<body> 
 
    <ul> 
 
    <li>This is a line item</li> 
 
    <li>This is a line item</li> 
 
    </ul> 
 
</body> 
 
</html>

Я уверен в том, как контролировать размер «список-стиль-образ» (т.е. масштабировать изображение), которое будет предпочтительным по сравнению с использованием нескольких изображений. В этом случае скажем, я хотел, чтобы изображение размером 20x20 пикселей было 10x10 пикселей.

Моим идеалом, однако, было бы создание настраиваемого стиля пули с атрибутом polygon в CSS, но не знаю, как реализовать или если оно поддерживается (поскольку многоугольник относительно новый сам).

Ниже приведен пример того, о чем я думал. Используемый многоугольник является шестиугольником для справки.

li { 
 
\t list-style-type: none; 
 
} 
 
li:before { 
 
\t clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%); 
 
\t -webkit-clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%); 
 
\t 
 
\t background-color:rgba(255,0,0,1.00); 
 
\t width: 10px; 
 
\t height: 10px; 
 
}

<!doctype html> 
 
<html> 
 
<head> 
 
</head> 
 
<body> 
 
    <ul> 
 
    <li>This is a line item</li> 
 
    <li>This is a line item</li> 
 
    </ul> 
 
</body> 
 
</html>

источник

2016-06-08 Josh Balsillie

Вместо того, чтобы использовать элемент списка изображений, можно использовать фоновые изображения. Если вы увеличите ширину и высоту фонового изображения em на 1, вы также должны увеличить левое дополнение родительского <li> на 1, так что вещи будут равномерно масштабироваться.

ul { 
 
    padding: 0; 
 
} 
 

 
li { 
 
    list-style: none; 
 
    position: relative; 
 
    padding-left: 1.25em; 
 
} 
 

 
li:after { 
 
    position: absolute; 
 
    left: 0; 
 
    top: 50%; 
 
    transform: translateY(-50%); 
 
    content: ''; 
 
    background: transparent url(http://i.stack.imgur.com/gtv3o.jpg) 0 50% no-repeat; 
 
    width: 1em; 
 
    height: 1em; 
 
    display: inline-block; 
 
    background-size: cover; 
 
}

<ul> 
 
    <li>This is a line item</li> 
 
    <li>This is a line item</li> 
 
    </ul>

источник

2016-06-08 23:25:50

Привет Энди, спасибо за совет! Я подумал об использовании фонового изображения, но мне не приходило в голову изменить размер фонового изображения: P –

Я понял, что это недостающая часть :) –

CSS Заменяет список Bullet With Polygon Custom Bullet (Масштабируемый)

ответ

Смежные вопросы