Thứ Ba, 4 tháng 9, 2018

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;
}

Không có nhận xét nào:

Đăng nhận xét