Page Widget How to - Cut Banner out

Question

We would like to know how to cut Banner out.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
.banner {<!-- ww w . ja va 2s  . c o m-->
  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-size: 13px;
}
</style>
</head>
<body>
  <div class="banner">
    
  </div>
</body>
</html>

The code above is rendered as follows: