HTML, CSS nổi bật cho thanh tiêu đề

HTML

<div id='nz-div'>
  <h3 class="tde">			
				<span class="null">Header 1</span>	
  </h3>
  <div class="sub-cat">
    <span>MENU 1</span>
    <span>MENU 2</span>
    <span>MENU 3</span>
    <span>MENU 4</span>
  </div>
</div>
 
<div id='nz-div-2'>
  <h3 class="tde">			
				<span>Header 2</span>
  </h3>
  <hr>
</div>
 
 
<div id='nz-div-3'>
  <h3 class="tde">			
				<span>Header 3</span>			
  </h3>
</div>
 
 
<div id='nz-div-4'>
  <h3 class="tde">			
				<span>Header 4</span>			
  </h3>
</div>
 
 
<div id='nz-div-5'>
  <h3 class="tde">			
				<span>HEADER 5</span>			
  </h3>
</div>
 
 
<h3 class="title-comm"><span class="title-holder">HEADER 6</span></h3>

CSS

div#nz-div {
    border-bottom: 2px solid red;
    margin-bottom: 40px;
    display: block;
}
 
#nz-div h3.tde {
    margin: 0;
    font-size: 16px;
    line-height: 20px;
    display: inline-block;
    text-transform: uppercase;
}
 
#nz-div h3.tde :after {
    content: "";
    width: 0;
    height: 0;
    border-top: 40px solid transparent;
    border-left: 20px solid #EA3A3C;
    border-bottom: 0px solid transparent;
    border-right: 0 solid transparent;
    position: absolute;
    top: 0px;
    right: -20px;
}
 
#nz-div h3.tde span {
    background: #EA3A3C;
    padding: 10px 20px 8px 20px;
    color: white;
    position: relative;
    display: inline-block;
    margin: 0;
}
 
.sub-cat {
    display: inline-block;
    margin: 0;
    line-height: 45px;
    margin-left: 100px;
    float: right;
}
 
/* 2  ========================= */
 
#nz-div-2 h3.tde :after {
    content: "";
    width: 0;
    height: 0;
    border-top: 19px solid transparent;
    border-left: 15px solid #EA3A3C;
    border-bottom: 19px solid transparent;
    border-right: 0 solid transparent;
    position: absolute;
    top: 0px;
    right: -15px;
}
 
#nz-div-2 h3.tde span {
    background: #EA3A3C;
    padding: 10px 20px 8px 20px;
    color: white;
    position: relative;
    display: inline-block;
    margin: 0;
}
 
#nz-div-2 h3.tde {
    margin: 15px 0;
    font-size: 16px;
    line-height: 20px;
    text-transform: uppercase;
}
 
#nz-div-2 hr {
    margin: -34px 0px 54px 0px;
    border: 1px solid red;
}
 
/* 3  ========================= */
 
#nz-div-3 h3.tde span {
    background: #EA3A3C;
    padding: 10px 20px 8px 20px;
    color: white;
    position: relative;
    display: inline-block;
    margin: 0;
    border-radius: 23px 23px 0px 0px;
}
 
#nz-div-3 h3.tde {
    margin: 15px 0;
    border-bottom: 2px solid #ea3a3c;
    font-size: 16px;
    line-height: 20px;
    text-transform: uppercase;
}
 
/* 4  ========================= */
 
#nz-div-4 h3.tde :after {
    content: "";
    width: 0;
    height: 0;
    border-top: 40px solid transparent;
    border-left: 20px solid #EA3A3C;
    border-bottom: 0px solid transparent;
    border-right: 0 solid transparent;
    position: absolute;
    top: 0px;
    right: -20px;
}
 
 
#nz-div-4 h3.tde :before {
    content: "";
    width: 0;
    height: 0;
    border-width: 40px 20px 0px 0px;
    border-style: solid;
    border-color: transparent;
    border-right-color: #EA3A3C;
    position: absolute;  
    top: 0px;
    left: -20px;
}
 
#nz-div-4 h3.tde span {
    background: #EA3A3C;
    padding: 10px 20px 8px 20px;
    color: white;
    position: relative;
    display: inline-block;
    margin: 0;
  
}
 
#nz-div-4 h3.tde {
    text-align: center;
    margin: 45px 0;
    border-bottom: 2px solid #ea3a3c;
    font-size: 16px;
    line-height: 20px;
    text-transform: uppercase;
}
 
/* 5  ========================= */
 
#nz-div-5 {
  text-align: center;
}
 
#nz-div-5 h3.tde {
    display: inline-block;
    background: #ea3a3c;
    color: white;
    height: 50px;
    line-height: 50px;
    padding: 0 30px;
  width: auto;
}
  
#nz-div-5 h3.tde span:before {
    content: '';
    background: url(https://web.ncnncn.com/wp-content/uploads/2017/06/bgh1l.png);
    width: 80px;
    height: 70px;
    z-index: -1; 
}
 
/* ======================================= */
.title-comm {
    color: #fff;
    font-size: 18px;
    position: relative;
    margin-top: 30px;
    margin-bottom: 30px;
    font-weight: 700;
    background-color: #fff;
    text-align: center;
}
 
h3.title-comm:before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    margin-top: 0;
    border-top: 2px solid #d0d2d3;
    z-index: 1;
    display: block;
}
 
.title-comm .title-holder {
    min-width: 350px;
    height: 45px;
    background-color: #56bbe7;
    height: auto;
    line-height: 45px;
    padding: 0px 20px;
    position: relative;
    z-index: 2;
    text-align: center;
    display: inline-block;
    min-width: 280px;
}
 
.title-holder:before {
    content: "";
    position: absolute;
    right: -15px;
    border-width: 0px;
    bottom: 0px;
    border-style: solid;
    border-color: #5c9efe transparent;
    display: block;
    width: 0;
    height: 0;
    border-top: 23px solid transparent;
    border-bottom: 22px solid transparent;
    border-left: 15px solid #56bbe7;
}
 
.title-holder:after {
    content: "";
    position: absolute;
    left: -15px;
    border-width: 0px;
    bottom: 0px;
    border-style: solid;
    border-color: #5c9efe transparent;
    display: block;
    width: 0;
    height: 0;
    border-top: 23px solid transparent;
    border-bottom: 22px solid transparent;
    border-right: 15px solid #56bbe7;
}

HTML

<div class="box-title-new">
	<div class="box-title-name-new">
		<span class="null">Sáng Tạo Sắc Việt 2017
	</div>
</div>

CSS

.box-title-new {
	position:relative;
	margin:50px 0;
	text-align:center;
}
.box-title-new .box-title-name-new {
	font-size:24px;
	font-weight:900;
	text-transform:uppercase;
	color:#fff;
	background:#00AA46;
	display:inline-block;
	vertical-align:top;
	position:relative;
	z-index:1;
	padding:10px 20px;
	marrgin-bottom:20px;
	border-radius:15px;
}
.box-title-new .box-title-name-new:before {
	content:"";
	position:absolute;
	border-top:10px solid #00aa46;
	border-left:15px solid transparent;
	border-bottom:7px solid transparent;
	border-right:15px solid transparent;
	left:calc(50% - 40px);
	bottom:-25px;
	width:50px;
}
.box-title-new .box-title-name-new:after {
	content:"";
	position:absolute;
	z-index:2;
	bottom:-18px;
	height:9px;
	width:200px;
	left:calc(50% - 100px);
	border-top: 2px solid #00aa46;
}