Các Mẫu Tiêu đề đẹp Dùng Cho Web - Code & Coffe

THIẾT BỊ SỐ PHỤ KIỆN

THIẾT BỊ SỐ PHỤ KIỆN

THIẾT BỊ SỐ PHỤ KIỆN

THIẾT BỊ SỐ PHỤ KIỆN

THIẾT BỊ SỐ PHỤ KIỆN

THIẾT BỊ SỐ PHỤ KIỆN

Code

<div id='nz-div'> <h3 class="tde"><span class="null">THIẾT BỊ SỐ PHỤ KIỆN</span></h3> </div> <div id='nz-div-2'> <h3 class="tde"><span>THIẾT BỊ SỐ PHỤ KIỆN</span></h3> <hr> </div> <div id='nz-div-3'> <h3 class="tde"><span>THIẾT BỊ SỐ PHỤ KIỆN</span></h3> </div> <div id='nz-div-4'> <h3 class="tde"><span>THIẾT BỊ SỐ PHỤ KIỆN</span></h3> </div> <div id='nz-div-5'> <h3 class="tde"><span>THIẾT BỊ SỐ PHỤ KIỆN</span></h3> </div> <h3 class="title-comm"><span class="title-holder">THIẾT BỊ SỐ PHỤ KIỆN</span></h3>

1234567891011121314151617

<div id='nz-div'><h3 class="tde"><span class="null">THIẾTBỊSỐPHỤKIỆN</span></h3></div><div id='nz-div-2'><h3 class="tde"><span>THIẾTBỊSỐPHỤKIỆN</span></h3><hr></div><div id='nz-div-3'><h3 class="tde"><span>THIẾTBỊSỐPHỤKIỆN</span></h3></div><div id='nz-div-4'><h3 class="tde"><span>THIẾTBỊSỐPHỤKIỆN</span></h3></div><div id='nz-div-5'><h3 class="tde"><span>THIẾTBỊSỐPHỤKIỆN</span></h3></div><h3 class="title-comm"><span class="title-holder">THIẾTBỊSỐPHỤKIỆN</span></h3>

Css

/* codfe.com - code new */ 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; }

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209

/* codfe.com - code new */div#nz-div {border-bottom:2pxsolid 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:40pxsolid transparent;border-left:20pxsolid#EA3A3C;border-bottom:0pxsolid transparent;border-right:0solid transparent;position:absolute;top:0px;right:-20px;}#nz-div h3.tde span {background:#EA3A3C;padding:10px20px8px20px;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:19pxsolid transparent;border-left:15pxsolid#EA3A3C;border-bottom:19pxsolid transparent;border-right:0solid transparent;position:absolute;top:0px;right:-15px;}#nz-div-2 h3.tde span {background:#EA3A3C;padding:10px20px8px20px;color:white;position:relative;display:inline-block;margin:0;}#nz-div-2 h3.tde {margin:15px0;font-size:16px;line-height:20px;text-transform:uppercase;}#nz-div-2 hr {margin:-34px0px54px0px;border:1pxsolid red;}/* 3 ========================= */#nz-div-3 h3.tde span {background:#EA3A3C;padding:10px20px8px20px;color:white;position:relative;display:inline-block;margin:0;border-radius:23px23px0px0px;}#nz-div-3 h3.tde {margin:15px0;border-bottom:2pxsolid#ea3a3c;font-size:16px;line-height:20px;text-transform:uppercase;}/* 4 ========================= */#nz-div-4 h3.tde:after {content:"";width:0;height:0;border-top:40pxsolid transparent;border-left:20pxsolid#EA3A3C;border-bottom:0pxsolid transparent;border-right:0solid transparent;position:absolute;top:0px;right:-20px;}#nz-div-4 h3.tde:before {content:"";width:0;height:0;border-width:40px20px0px0px;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:10px20px8px20px;color:white;position:relative;display:inline-block;margin:0;}#nz-div-4 h3.tde {text-align:center;margin:45px0;border-bottom:2pxsolid#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:030px;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:2pxsolid#d0d2d3;z-index:1;display:block;}.title-comm.title-holder{min-width:350px;height:45px;background-color:#56bbe7;height:auto;line-height:45px;padding:0px20px;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:23pxsolid transparent;border-bottom:22pxsolid transparent;border-left:15pxsolid#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:23pxsolid transparent;border-bottom:22pxsolid transparent;border-right:15pxsolid#56bbe7;}