实际应用的css箭头

来源：互联网发布：windows live 注册坏了编辑：程序博客网时间：2024/06/05 02:01

网上的css箭头纯教人做箭头,这里简单结合实际,解析运用的方式和结构，同样的关键解析，伪类、定位、border。

<!doctype html><html class="no-js"><head>    <meta charset="utf-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <meta name="description" content="">    <meta name="keywords" content="">    <title>Responsive TimeLine</title>    <link rel="stylesheet" href="css/normalize.css">    <link rel="stylesheet" href="css/main.css"></head><body>    <header>        <span>Responsive TimeLine</span>    </header>    <div class="container">        <div class="page">            <div class="time">                <span class="year">2016-05-01</span>                <span class="clock">18:30</span>            </div>            <div class="content">                <h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, neque.</h2>                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid architecto at atque consequatur                    consequuntur corporis dolor facere, fuga laborum natus, nihil rem repudiandae temporibus ullam                    ut veniam veritatis voluptas voluptates. Aliquam assumenda eius exercitationem hic ipsa numquam                    quam quis ratione, repellat, reprehenderit sunt, ullam! Accusamus, ad aliquid asperiores                    aspernatur at consequuntur cupiditate delectus deleniti dignissimos doloremque ea enim error, et                    excepturi explicabo facere fuga illo impedit iste laudantium minima molestias non nulla odit                    optio quos repellat sequi similique tempore vel veniam, vero voluptates voluptatum! At, cum                    deleniti, eaque enim fugiat illo in molestiae necessitatibus non obcaecati perferendis possimus                    temporibus tenetur.</p>            </div>        </div>        <div class="page">            <div class="time">                <span class="year">2016-05-01</span>                <span class="clock">18:30</span>            </div>            <div class="content deepColor">                <h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, neque.</h2>                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid architecto at atque consequatur                    consequuntur corporis dolor facere, fuga laborum natus, nihil rem repudiandae temporibus ullam                    ut veniam veritatis voluptas voluptates. Aliquam assumenda eius exercitationem hic ipsa numquam                    quam quis ratione, repellat, reprehenderit sunt, ullam! Accusamus, ad aliquid asperiores                    aspernatur at consequuntur cupiditate delectus deleniti dignissimos doloremque ea enim error, et                    excepturi explicabo facere fuga illo impedit iste laudantium minima molestias non nulla odit                    optio quos repellat sequi similique tempore vel veniam, vero voluptates voluptatum! At, cum                    deleniti, eaque enim fugiat illo in molestiae necessitatibus non obcaecati perferendis possimus                    temporibus tenetur.</p>            </div>        </div>        <div class="page">            <div class="time">                <span class="year">2016-05-01</span>                <span class="clock">18:30</span>            </div>            <div class="content">                <h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, neque.</h2>                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid architecto at atque consequatur                    consequuntur corporis dolor facere, fuga laborum natus, nihil rem repudiandae temporibus ullam                    ut veniam veritatis voluptas voluptates. Aliquam assumenda eius exercitationem hic ipsa numquam                    quam quis ratione, repellat, reprehenderit sunt, ullam! Accusamus, ad aliquid asperiores                    aspernatur at consequuntur cupiditate delectus deleniti dignissimos doloremque ea enim error, et                    excepturi explicabo facere fuga illo impedit iste laudantium minima molestias non nulla odit                    optio quos repellat sequi similique tempore vel veniam, vero voluptates voluptatum! At, cum                    deleniti, eaque enim fugiat illo in molestiae necessitatibus non obcaecati perferendis possimus                    temporibus tenetur.</p>            </div>        </div>       <div class="page">        <div class="time">            <span class="year">2016-05-01</span>            <span class="clock">18:30</span>        </div>        <div class="content deepColor">            <h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, neque.</h2>            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid architecto at atque consequatur                consequuntur corporis dolor facere, fuga laborum natus, nihil rem repudiandae temporibus ullam                ut veniam veritatis voluptas voluptates. Aliquam assumenda eius exercitationem hic ipsa numquam                quam quis ratione, repellat, reprehenderit sunt, ullam! Accusamus, ad aliquid asperiores                aspernatur at consequuntur cupiditate delectus deleniti dignissimos doloremque ea enim error, et                excepturi explicabo facere fuga illo impedit iste laudantium minima molestias non nulla odit                optio quos repellat sequi similique tempore vel veniam, vero voluptates voluptatum! At, cum                deleniti, eaque enim fugiat illo in molestiae necessitatibus non obcaecati perferendis possimus                temporibus tenetur.</p>        </div>    </div>        <div class="page">            <div class="time">                <span class="year">2016-05-01</span>                <span class="clock">18:30</span>            </div>            <div class="content">                <h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, neque.</h2>                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid architecto at atque consequatur                    consequuntur corporis dolor facere, fuga laborum natus, nihil rem repudiandae temporibus ullam                    ut veniam veritatis voluptas voluptates. Aliquam assumenda eius exercitationem hic ipsa numquam                    quam quis ratione, repellat, reprehenderit sunt, ullam! Accusamus, ad aliquid asperiores                    aspernatur at consequuntur cupiditate delectus deleniti dignissimos doloremque ea enim error, et                    excepturi explicabo facere fuga illo impedit iste laudantium minima molestias non nulla odit                    optio quos repellat sequi similique tempore vel veniam, vero voluptates voluptatum! At, cum                    deleniti, eaque enim fugiat illo in molestiae necessitatibus non obcaecati perferendis possimus                    temporibus tenetur.</p>            </div>        </div>    </div></body></html>

/************ * 头部样式 ************/header {    color: #47A3DA;    margin-top: 2%;    margin-left: 15%;    font-size: 36px;}@media screen and (max-width: 54em) and (min-width: 40em) {    header {        text-align: center;        color: #47A3DA;        margin: 0 auto;        font-size: 26px;    }}@media screen and (max-width: 40em) {    header {        text-align: center;        color: #47A3DA;        margin: 0 auto;        font-size: 16px;    }}.container{    margin-top:2%;}.page{    /*border: 1px solid red;*/    width:50%;    margin: 0 auto;    display: flex;    flex-direction: row;}@media screen  and (max-width: 40em){    .page{        /*border: 1px solid red;*/        width: 80%;        margin: 0 auto;        display: flex;        flex-direction: column;    }}.page .content h2{    margin: 0px;    padding: 10px 0px;    border-bottom: 1px solid #A7D9F5;}.page .time{    border-right: 10px #AFDCF8 solid;    text-align: right;    padding-right: 10px;}@media screen and (max-width: 40em){    .page .time{        text-align: left;        border-right:none;        padding:0;    }}.page .time .year{    color: #BDD0DB;    font-size: 10px;}.page .time .clock{    font-size: 36px;    color:  #3594CB;}.page .content::after{    /*border-color: transparent #6CBFEE transparent transparent;*/    border-color: transparent red transparent transparent;/*几个方向*/    border-style: solid;    border-width: 10px;    content: "";    height: 0;    position: absolute;/*相对与箭头的属主是谁*/    right: 100%;/*非常关键，至于为什么，请自己试*/    top: 10px;}.page .content{    position:relative;    color: #fff;    background: #6CBFEE;    border: 1px yellow solid;    border-radius: 10px;    padding: 2%;    margin-bottom: 10px;    margin-left: 30px;}@media screen and (max-width: 40em){    .page .content{        margin-bottom: 10px;        margin-left: 0;    }    .page .content::after{        /*border-color: transparent #6CBFEE transparent transparent;*/       display: none;    }}.page .deepColor{    background: #3594CB;}

阅读全文

0 0