ベル – css bell –

cssのみで 「ベル」 アイコンを作成してみました。これ結構難しかったです･･･

ソース

html

<div class="bell"></div>

css

/* ○ */
.bell {
	font-size: 100px;
    position: relative;
	margin: 0 auto;
	width: 0.2em;
	height: 0.2em;
	border-radius: 0.2em;
	border: 0.1em solid #39a9d6;
	box-shadow: 0 1.2em 0 0 #39a9d6;
}
/* 本体 */
.bell:before, .bell:after {
    position: absolute;
    content:"";
    top: 0.1em;
    width: 0.8em;
    height: 1.2em;
}
.bell:before {
	left: -0.2em;
    border-radius: 1em 1em 0.6em 0.6em / 1em 1em 0.2em 0.1em;
    -webkit-transform: rotate(15deg);
    -webkit-transform-origin: 0 0;
    transform: rotate(15deg);
    transform-origin: 0 0;
    background-image:-webkit-radial-gradient(#39a9d6 0%,#39a9d6 100%);
    background-image:radial-gradient(#39a9d6 0%,#39a9d6 100%);
}
.bell:after {
    left: -0.4em;
    border-radius: 1em 1em 0.6em 0.6em / 1em 1em 0.1em 0.2em;
    -webkit-transform: rotate(-15deg);
    -webkit-transform-origin:100% 0;
    transform: rotate(-15deg);
    transform-origin:100% 0;
    background-image:-webkit-radial-gradient(#39a9d6 70%,#39a9d6 100%);
    background-image:radial-gradient(#39a9d6 70%,#39a9d6 100%);
}