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 常用布局方式 一行两列&高度自适应&垂直方向居中