Banner über einem Bild

by Jens Grochtdreis

HTML

<div class="banner">
    <img src="http://placekitten.com/400/300" />
</div>

CSS

.banner {
  position:relative;
  margin:20px
}
.banner:before {
  content: "Category name";
  position:absolute;
  top:5px;
  left:-8px;
  padding-right: 15px;
  color:#fff;
  font-weight:bold;
  height:0px;
  border: 20px solid #a20000;
  border-right-color: transparent;
  line-height:0px;
  box-shadow: 0 8px 8px -5px rgba(0,0,0,0.75);
  z-index:1;
}
.banner:after {
  content: "";
  position:absolute;
  top:45px;
  left:-8px;
  border: 4px solid #000;
  border-left-color: transparent;
  border-bottom-color: transparent;
}

body {font-family: Verdana, sans-serif; font-size: 13px;}