➕ Hospital Plus Symbol using HTML5 and CSS3

Salow
January 2, 2022
CSS, Shape

The Red Cross symbol is used in hospitals and by doctors so that they can be easily identified as red color often represents emergency or danger. We will create it using the HTML and CSS.

Following is the CSS Class for Hospital Cross.

.cross {
  margin: 35px;
  border-color: white;
  background: red;
  height: 100px;
  position: relative;
  width: 20px;
  border-style: solid;
}
.cross::before {
  border-style: solid;
  border-color: white;
  background: inherit;
  content: "";
  height: 20px;
  left: -42px;
  position: absolute;
  top: 38px;
  width: 100px;
}
.cross::after {
  background: inherit;
  content: "";
  height: 100px;
  position: absolute;
  width: 20px;
}

Following is the output.

You can find the complete coding in Visual Studio Code tutorial in the following YouTube Video.

Here is the complete code for creating Hospital cross Symbol using HTML and CSS:

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      .cross {
        margin: 35px;
        border-color: white;
        background: red;
        height: 100px;
        position: relative;
        width: 20px;
        border-style: solid;
      }
      .cross::before {
        border-style: solid;
        border-color: white;
        background: inherit;
        content: "";
        height: 20px;
        left: -42px;
        position: absolute;
        top: 38px;
        width: 100px;
      }
      .cross::after {
        background: inherit;
        content: "";
        height: 100px;
        position: absolute;
        width: 20px;
      }
    </style>
    <title>Salow Studios</title>
  </head>
  <body>
    <!-- <div class="content-center"> -->
    <h1 class="h1">Cross Symbol</h1>
    <div class="cross"></div>
    <!-- </div> -->
  </body>
</html>

Thank you for reading. I hope that it has helped you with your project. Good luck and happy coding!

See you in another tutorial!