Cross or plus sign shape in CSS
Drawing a cross or plus sign shape in CSS. Not using images, letters, special characters, pseudo-elements. Just pure CSS and one HTML-element.
HTML code:
<div class="plus"></div>
CSS code:
.plus {
width: 80px;
height: 80px;
background: linear-gradient(to bottom, transparent 40%, #000 40%, #000 60%, transparent 60%), linear-gradient(to right, transparent 40%, #000 40%, #000 60%, transparent 60%);
}
Browser support
- Windows
- Internet Explorer 10.0+
- Firefox 16.0+
- Google Chrome
- Opera 12.1+
- Linux
- Firefox 16.0+
- Google Chrome / Chromium
- Opera 12.1+