CSS3 简单图形绘制

三角形绘制

<style>
    #triangle {
        width: 0;
        border-style: solid;
        border-width: 50px 50px 50px 50px;
        border-color: red blue orange gray;
    }
</style>
<div id="triangle"></div>

效果如图：

<style>
    #triangle2 {
        width: 0;
        border-style: solid;
        border-width: 50px 50px 50px 50px;
        border-color: red red grey grey;
    }
</style>
<div id="triangle2"></div>

效果如图：

<style>
    #triangle3 {
        width: 0;
        border-top: 60px solid transparent;
        border-right: 100px solid transparent;
        border-bottom: 80px solid red;
    }
</style>
<div id="triangle3"></div>

效果如图：

<style>
    #triangle4 {
        width: 0;
        border-left: 50px solid transparent;
        border-right: 50px solid transparent;
        border-bottom: 100px solid red;
    }
</style>
<div id="triangle4"></div>

效果如图：

绘制心形

<style>
    #heart {
        float: left;
        width: 100px;
        height: 90px;
        position: relative;
    }
    #heart:before,#heart:after {
        position: absolute;
        top: 0;
        content: '';
        width: 50px;
        height: 80px;
        background: red;
        border-radius: 25px 25px 0 0;
    }
    #heart:before {
        left: 14px;
        transform: rotate(-45deg);
    }
    #heart:after {
        left: 36px;
        transform: rotate(45deg);
    }
</style>
<div id="heart"></div>

效果如图：

绘制箭头

<style>
    #arrow {
        margin-top: 105px;
        float: left;
        width: 0;
        border-left: 30px solid transparent;
        border-right: 30px solid transparent;
        border-top: 60px solid red;
        position: relative;
    }
    #arrow:before,#arrow:after {
        position: absolute;
        content: '';
    }
    #arrow:before {
        border-left: 30px solid transparent;
        border-right: 30px solid transparent;
        border-top: 20px solid #fff;
        left: -30px;
        top: -61px;
    }
    #arrow:after {
        height: 120px;
        border-left: 2px solid red;
        border-right: 2px solid red;
        left: -2px;
        top: -161px;
    }
</style>
<div id="arrow"></div>

效果如图：

绘制五角星

<style>
    #star-five {
        margin: 75px 0 55px 0;
        float: left;
        width: 0;
        height: 0;
        border-top: 66px solid red;
        border-left: 100px solid transparent;
        border-right: 100px solid transparent;
        position: relative;
    }
    #star-five:before,#star-five:after {
        position: absolute;
        content: '';
        border-top: 66px solid red;
        border-left: 100px solid transparent;
        border-right: 100px solid transparent;
        top: -66px;
        left: -100px;
    }
    #star-five:before {
        transform: rotate(-72deg);
    }
    #star-five:after {
        transform: rotate(72deg);
    }
</style>
<div id="star-five"></div>

效果如图：

绘制冒泡框/提示框

<style>
    #prompt {
        float: left;
        width: 200px;
        height: 100px;
        margin: 20px 0 40px;
        border-radius: 20px;
        background: #669;
        position: relative;
    }
    #prompt:after {
        position: absolute;
        content: "";
        width: 50px;
        height: 120px;
        border: 0 solid transparent;
        border-right: 30px solid #669;
        border-radius: 0 0 50px 0;
        top: 0;
        left: 0;
    }
</style>
<div id="prompt"></div>

效果如图：

绘制气球

<style>
    #balloon {
        float: left;
        width: 160px;
        height: 160px;
        background: #faf9f9;
        border-radius: 160px 160px 64px 160px;
        transform: rotate(45deg);
        box-shadow: 0 0 100px 0 rgba(243,98,122,1) inset, 20px 20px 20px rgba(243,98,122,0.3);
        position: relative;
    }
    #balloon:after {
        position: absolute;
        content: '';
        border: 8px solid transparent;
        border-right-color: rgba(243,98,122,0.88);
        transform: rotate(45deg);
        border-radius: 16px;
        bottom: -2px;
        right: -2px;
    }
</style>
<div id="balloon"></div>

效果如图：

绘制阴阳八卦

<style>
    #yin-yang {
            float: left;
            width: 48px;
            height: 96px;
            background-color: #fff;
            border-style: solid;
            border-color: #000;
            border-width: 2px 50px 2px 2px;
            border-radius: 50%;
            -webkit-animation: Rotate 6s linear infinite; /*旋转*/
            position: relative;
        }
        #yin-yang:before,#yin-yang:after {
            position: absolute;
            content: '';
        }
        #yin-yang:before {
            width: 12px;
            height: 12px;
            background: #fff;
            border: 18px solid #000;
            border-radius: 50%;
            top: 0;
            left: 50%;
        }
        #yin-yang:after {
            width: 12px;
            height: 12px;
            background: #000;
            border: 18px solid #fff;
            border-radius: 50%;
            top: 50%;
            left: 50%;
        }
        @-webkit-keyframes Rotate {
            0%{transform: rotate(360deg)}
            100%{transform: rotate(0deg)}
        }
        @keyframes Rotate {
            0%{transform: rotate(360deg)}
            100%{transform: rotate(0deg)}
        }
</style>
<div id="yin-yang"></div>

效果如图：