Drawing An Old Television in CSS
Feb 01 2018When I was looking for an old television icon to use for the Abbott & Costello Ipsum thing I made the other day, I realized I could probably just do it using CSS alone. Turns out I was right.
Note: This is leaning mostly on Tailwind CSS with a little custom CSS for handling the skewing of the antennas.
HTML
<div class="flex">
<div class="flex flex-col items-center">
<div class="flex w-32 justify-between">
<div class="antenna-l border border-gray-700 border-b-0"></div>
<div class="antenna-r border border-gray-700 border-b-0"></div>
</div>
<div class="flex p-4 border-4 rounded-lg border-gray-700 bg-gray-500 w-96 h-64 mb-4">
<div class="w-full h-full p-2 border border-gray-700 rounded-lg mr-6 bg-gray-200"></div>
<div class="flex flex-col justify-around text-gray-700">
<div class="h-12 w-12 rounded-full bg-gray-200 flex justify-center items-center border border-gray-700">
</div>
<div class="h-12 w-12 rounded-full bg-gray-200 flex justify-center items-center border border-gray-700">
</div>
</div>
</div>
</div>
</div>
CSS
.antenna-l, .antenna-r {
/* @apply call is from Tailwind */
@apply h-16 w-4 bg-gray-500 rounded-t-lg;
}
.antenna-l {
transform: skew(45deg);
}
.antenna-r {
transform: skew(-45deg);
}