<div class="entry">
        <div class="entry-triangle"></div>
        单色很难过
        单色很难过
        单色很难过
    </div>
     <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            background: yellowgreen;
        }
        .entry{
            width: 100px;
            margin: 100px auto;
            padding: 10px;
            background-color: aqua;
            border-radius:10px;
            /* -webkit-border-radius:10px; */
            /* -moz-border-radius:10px; */
        }
        .entry-triangle{
            position: absolute;
            margin-left: -20px;
            width: 0;
            height: 0;
            border-right:10px solid aqua;
            border-top:  10px solid transparent;
            border-bottom:  10px solid transparent;
        }
    </style>

制作三角形 css3

简易版的三角形

<style>
        div{
            width: 0;
            height: 0;
            border-right:20px solid aqua;
            border-top:  20px solid transparent;
            border-bottom:  20px solid transparent;
        }
    </style>

制作三角形 css3

相关文章: