Anzeige der DK-Stufe mit CSS-Zacken

Desaster-Kommunikation

by Fiddel

HTML

<div class="wrapper">
  <div class="dk">
  DK ist deaktiviert
  </div>
</div>

CSS

.wrapper {
  padding:2rem;
  background:#fff;
}
.dk {
    width: 200px;
    height: 80px;
    padding:2rem .5rem .5rem;
    position: relative;
    border: 1px solid #f00;
    background: #fff;
}

.dk:after,
.dk:before {
    content: '';
    display: block;
    width: 0;
    height: 0;
    
    position: absolute;
    left: 50%;
    transform:translateX(-50%);
    
    border-style: solid;
}
.dk:after {
    top: -1px;
    border-color: #fff transparent transparent transparent;
    border-width: 10px;
}
.dk:before {
    top: -1px;
    border-color: #a00 transparent transparent transparent;
    border-width: 11px;
}