Modal style

modal.css

/**
@example:
<div class="modal">
  <h1 class="title">Hox!</h1>
  <hr/>
</div>
*/

body {
  background: #ddd;
}

h1 {
  font-family: sans-serif;  
  color: #555;
  margin: 0;
  font-size: 18px;
  line-height: 24px;
  text-transform: uppercase;
  font-weight: bold;
}

hr {
  border: 0;
  border-bottom: 2px dotted #eee;
  margin: 0;
}

.modal {
  width: 400px;
  height: 140px;
  position: relative;
  background-color: white;
  box-shadow: 0 10px 10px 2px rgba(0,0,0,0.15);
}

.modal .title {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 40px;
}

.modal:after {
  content: " ";
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 40 15' xmlns='http://www.w3.org/2000/svg'><path d='m 0,0 v 15 l 20,-10 20,10 v -15 z' stroke='none' fill='white' stroke-width='2'/></svg>");
  background-size: 40px 15px;
  background-repeat: repeat-x;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 15px;
}