Css 標題效果常見整理（一）背景系列

一、Css 標題效果常見整理背景+文字

1. 立體標題

   <div class="title-block">
        <div class="title">推薦標題</div>
        <div class="triangle"></div>
    </div>

        .title-block {
            display: inline-block;
            position: relative;
            background: #F3715D;
            color: white;
            text-align: center;
            padding: 0px 25px;
            height: 45px;
            line-height: 45px;
            border-radius: 5px 5px 5px 0px;
            letter-spacing: 2px;
        }

        .title-block .triangle {
            width: 0px;
            height: 0px;
            position: absolute;
            border: 5px solid transparent;
            border-top: 5px solid #DD6755;
            border-right: 5px solid #DD6755;
            left: 0px;
            bottom: -10px;
        }

 

2. 膠囊效果

    <div class="title-block">
        <div class="title">中國籃球</div>
    </div>

        .title-block {
            display: inline-block;
            position: relative;
            background: #F3715D;
            color: white;
            text-align: center;
            padding: 0px 25px 0px 15px;
            height: 45px;
            line-height: 45px;
            border-radius: 0px 25px 25px 0px;
            letter-spacing: 2px;
        }

 

3. 箭頭效果

    <div class="title-block">
        <div class="title">推薦標題</div>
        <div class="angle"></div>
    </div>

        .title-block {
            display: inline-block;
            position: relative;
            background: #F3715D;
            color: white;
            text-align: center;
            padding: 0px 20px;
            height: 45px;
            line-height: 45px;
            letter-spacing: 2px;
        }

        .title-block .angle {
            position: absolute;
            right: -22px;
            top: 0px;
            height: 45px;
            width: 45px;
            background: #F3715D;
            transform: skew(45deg,0deg);
            z-index: -1;
        }

 

3.左側邊

    <div class="title-block">
        左側邊框帶寬度，顏色為藍色
    </div>

        .title-block{
            border-left: 6px solid #2196F3;
            background: #ddffff;
            padding: 14px;
            font-size: 16px;
            letter-spacing: 1px;
        }

 

更多：

 

Css3 列表布局 兩列或者多列布局整理

Css3 常用布局方式 一行兩列&高度固定&某列寬度自適應

Css3 常用布局方式 一行兩列&高度自適應&垂直方向居中