– cart -　cssのみで「カート」アイコンを描いてみた

cssのみで 「ショッピングカート」 アイコンを作成してみました。斜めの線を使いたかったのですが、うまくいかずに全て直線になってます。

ソース

html

<div class="cart"></div>

css

/* 本体 */
.cart {
	font-size: 100px;
	position: relative;
	margin: 0.2em 0 0;
	width: 1.6em;
	height: 1.2em;
	background:
		linear-gradient(to bottom, #39a9d6 0%, #39a9d6 100%) 0em 0em / 0.3em 0.1em no-repeat,
		linear-gradient(to bottom, #39a9d6 0%, #39a9d6 100%) 0.3em 0em / 0.1em 1.0em no-repeat,
		linear-gradient(to bottom, #39a9d6 0%, #39a9d6 100%) 0.3em 0.2em / 1.2em 0.1em no-repeat,
		linear-gradient(to bottom, #39a9d6 0%, #39a9d6 100%) 0.65em 0.2em / 0.1em 0.5em no-repeat,
		linear-gradient(to bottom, #39a9d6 0%, #39a9d6 100%) 1.05em 0.2em / 0.1em 0.5em no-repeat,
		linear-gradient(to bottom, #39a9d6 0%, #39a9d6 100%) 1.4em 0.2em / 0.1em 0.5em no-repeat,
		linear-gradient(to bottom, #39a9d6 0%, #39a9d6 100%) 0.3em 0.45em / 1.2em 0.1em no-repeat,
		linear-gradient(to bottom, #39a9d6 0%, #39a9d6 100%) 0.3em 0.7em / 1.2em 0.1em no-repeat,
		linear-gradient(to bottom, #39a9d6 0%, #39a9d6 100%) 0.3em 0.9em / 1.1em 0.1em no-repeat
	;
}
/* タイヤ左 */
.cart::before {
	content: "";
	position: absolute;
	top: 1em;
	left: 0.4em;
	width: 0.1em;
	height: 0.1em;
	border: 0.1em solid  #39a9d6;
	border-radius: 100%;
}
/* タイヤ右 */
.cart::after {
	content: "";
	position: absolute;
	top: 1em;
	left: 1em;
	width: 0.1em;
	height: 0.1em;
	border: 0.1em solid  #39a9d6;
	border-radius: 100%;
}