Css tạo khung title

 

**** HTML:

<div class="homesp-outsite">

        <div class="title-mode">ĐIỆN NĂNG LƯỢNG MẶT TRỜI</div>

</div>

**** CSS:

.title-mode {

    width: auto;

    font-size: 16px;

    float: left;

    padding: 0 16px;

    position: relative;

    background: #067eaf;

    color: #fff;

    text-transform: uppercase;

    font-weight: 700;

}

.title-mode::after {

    border-left: 0 solid #067eaf;

    border-right: 20px solid transparent;

    border-bottom: 50px solid #067eaf;

    content: "";

    height: 0;

    position: absolute;

    right: -20px;

    top: 0;

    width: 0;

}

Backgound Size Css

**** HTML:

<div class="thumbnail product-item wow animated zoomIn animated" style="visibility: visible; animation-name: zoomIn;">

    <a href=''><img src="image.jpg"></a>

</div>

**** CSS:

.thumbnail{

    margin-bottom: 25px !important; 

    /*background: url(../images/TDSG.png);*/

    background-repeat: no-repeat;

    background-size: 267px 314px;

    border: none !important;

    border-radius: none;

    overflow: hidden;

}

Hình nền background phía dưới

**** CSS
worldwide-page{
    background: url(../images/Worldwide.jpg) no-repeat center center;
    text-align: center;
    /*padding: 80px 0 60px;*/
    background-position: top 10px center;
    background-attachment: fixed;
    background-size: cover;
    z-index: 10;
}

css tạo góc tam giác phía sau :after

**** HTML
<h2 class="title-category ">
<a href="javascript:void(0)">Thiết bị đo điện, điện tử</a>
</h2>
**** CSS
.title-category {
    background-color: #e74c3c;
    color: #fff;
    font-weight: 100;
    font-size: 21px;
    padding: 8px 15px;
    display: inline-block;
    position: relative;
    margin-bottom: 0;
    margin-right: 35px;
}
.title-category:after {
    border-color: transparent #e74c3c;
}
.title-category:after {
    content: '';
    position: absolute;
    border-style: solid;
    border-width: 23px 0 23px 15px;
    display: block;
    width: 0;
    z-index: 1;
    margin-top: -23px;
    right: -15px;
    top: 50%;
}
.title-category  a{
   color:#fff;
}