Css3实现三角效果

来源：互联网发布：java编程软件有哪些编辑：程序博客网时间：2024/05/16 14:39

<!doctype html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport"          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">    <meta http-equiv="X-UA-Compatible" content="ie=edge">    <title>Document</title>    <style>        body{            margin: 200px;            background: gray;        }        article{            width: 444px;            border: 1px solid #000000;            text-align: center;            border-radius: 10px;            position: relative;            background: #000000;            color: wheat;        }        article::after{            position: absolute;            width: 0;    //            height: 0; //            content: '';            bottom: -33px;            left: 50%;            border-color: #000 transparent transparent；

    // border-color: transparent  transparent  transparent #dddddd;   这里设置不同的位置 可以实现不同是三角效果
            border-style: solid;            border-width: 20px;        }    </style></head><body>    <article>        <h1>Bye Logen</h1>        <p>            <br>            人必须忠于自己 乔伊 不能违背自己的本性 <br>            带着杀戮活下去很艰难 这条路没有退路 <br>            是对是错你都得背负 直至一生 <br>            现在快回去找你妈妈 告诉她一切都好 <br>            山谷里再也不会有枪声了 <br>            <br>        </p>    </article></body></html>

阅读全文

0 0