Marker mit 3D-Touch an Contentbox

dabblet.css

/**
 * Marker mit 3D-Touch an Contentbox
 */
.box {
 position: relative;
 border: 1px solid #333;
 padding: 2.25em 0.75em 0.75em 0.75em;
}
p {
  margin: 0;
}
.marker {
    display: inline-block;
    position: absolute;
    left: -0.82em;
    top: -1px;
    width: 4em;
    height: 2em;
    font-size: 0.85em;
    background-color: #fd8100;
      box-shadow: -2px 2px 5px rgba(0, 0, 0, 0.5);
  -webkit-transition: background-color 0.5s ease-in 0s;
     -moz-transition: background-color 0.5s ease-in 0s;
      -ms-transition: background-color 0.5s ease-in 0s;
       -0-transition: background-color 0.5s ease-in 0s;
          transition: background-color 0.5s ease-in 0s;
}
.marker:hover {
    background-color: #666;
}

.marker:after {
content: "";
position: absolute;
top: 100%;
left: 0;
width: 0;
height: 0;
border-width: 0 0.75em 0.75em 0;
border-style: solid;
border-color: transparent #888
}

body {padding: 40px;font-family: Verdana, sans-serif; width: 600px}

dabblet.html

<div class="box">
  <div class="marker"></div>
  <p>Achtung! Dieser Blindtext wird gerade durch 130 Millionen Rezeptoren Ihrer Netzhaut erfaßt. Die Zellen werden dadurch in einen Erregungszustand versetzt, der sich über den Sehnerv in dem hinteren Teil Ihres Gehirns ausbreitet. Von dort aus überträgt sich die Erregung in Sekundenbruchteilen auch in andere Bereiche Ihres Großhirns. Ihr Stirnlappen wird stimuliert. Von dort aus gehen jetzt Willensimpulse aus, die Ihr zentrales Nervensystem in konkrete Handlungen umsetzt. Kopf und Augen reagieren bereits. Sie folgen dem Text, nehmen die darin enthaltenen Informationen auf wie ein Schwamm. Nicht auszudenken, was mit Ihnen hätte passieren können, wenn dieser Blindtext durch einen echten Text ersetzt worden wäre.</p>
</div>  

settings.json

{"view":"split","prefixfree":"1","page":"css"}