1

私の最終目標は、画面の解像度に応じて拡大縮小できる弾丸を作成することです。

CSS のいくつかの側面では、スケーリング可能なコンテナ内に大きな画像をインポートするか、複数のサイズの画像を使用して、画面の解像度に応じて正しい画像を表示できることを知っています。

以下は、画像を使用した簡単な例です。

li {
	list-style-type: square; /* Default */
	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 ピクセルにしたいとします。

ただし、私の理想は、CSS でポリゴン属性を使用してカスタムの箇条書きスタイルを作成することですが、実装方法やサポートされているかどうかはわかりません (ポリゴン自体は比較的新しいため)。

以下は私が考えた例です。使用する多角形は参考用の六角形です。

li {
	list-style-type: none;
}
li:before {
	clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
	-webkit-clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
	
	background-color:rgba(255,0,0,1.00);
	width: 10px;
	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>

4

1 に答える 1

0

リスト アイテムの画像を使用する代わりに、背景画像を使用できます。em背景画像の幅/高さを 1 増やす場合は、親の左パディングも 1 増やす必要があります。<li>これにより、物事が均等にスケーリングされます。

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-08T23:25:50.933 に答える