How to display information about the state of the microphone on the screen?

Question

css

Good day, I encountered the need to display information about the state of the microphone (on / off) on the screen.
Maybe you need some utility or prescribe something?

Answer 1

You make a rectangle of color #6890E7 and through :before and :after there are two options:
1. Create squares, arrange left and right, and transform: rotate them by about 45 (one) and -45 (other) degrees
2. Create triangles of white colors: htmlbook.ru/blog/treugolniki-cherez-css
UPD: In general, there are three options and, most likely, even more, my third one is on clip-path, but it is only on -webkit so far, although -moz partially supports with url(): caniuse.com/#search=clip-path

Answer 2

Like this or this

Answer 3

codepen.io/aliencash/pen/RrQxGN