<div role="img" aria-label="Warning. Neighborhood Watch. All suspicious activities are reported to the Police Department.">
  Warning
</div>

div {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 37.5vmin;
  height: 57.5vmin;
  border: 1.25vmin solid black;
  border-radius: 4vmin;
  font-family: 'Arial Black, Heavy', 'Arial Black', Arial, sans-serif;
  font-weight: bold;
  font-size: 6vmin;
  letter-spacing: 0.25vmin;
  text-transform: uppercase;
  text-align: center;
  line-height: 7.25vmin;
  background-image: linear-gradient(orangered 7.25vmin, black 0 8.5vmin, white 0 42.5vmin, black 0 43.75vmin, orangered 0);
}

div::before {
  content: "Neighborhood Watch";
  display: block;
  position: absolute;
  top: 0%;
  left: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding-top: 34vmin;
  font-size: 3.75vmin;
  line-height: 4vmin;
  letter-spacing: 0;
  background-image: radial-gradient(circle at 50% 35%, black 25%, transparent 0);
  clip-path: polygon(11% 56%,41% 35%,42% 30%,45% 30%,43% 29%,49% 30%,56% 24%,58% 27%,65% 26%,63% 34%,69% 36%,63% 36%,63% 36.75%,57% 35%,68% 40%,64% 42%,65% 46%,83% 56%, 100% 56%, 100% 100%, 0% 100%, 0% 56%);
}

div::after {
  content: "All suspicious activities \A0 are reported to the \A0 Police Department";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  font-family: 'Impact Condensed', Impact, 'Arial Black', Arial, sans-serif;
  font-size: 3.25vmin;
  line-height: 4.25vmin;
  letter-spacing: 0;
  padding-top: 44.25vmin;
  background-image:
    radial-gradient(circle at 50% 37.5%, transparent 9vmin, red 0 10.5vmin, transparent 0),
    linear-gradient(40deg, transparent calc(50% - 0.75vmin), red 0 calc(50% + 0.75vmin), transparent 0);
  background-size: 100% 100%, 40% 40%;
  background-position: 0 0, 50% 29%;
  background-repeat: no-repeat;
}