CSS中的“形状”

   CSS所能展现出的”形状“

    下面的所有案例的实现都只用到了一个html元素(例如div)。虽然CSS在每一种浏览器中都有兼容性差异,但是这些例子至少支持一种以上浏览器(例如chorme)。

     正方形

 CSS中的“形状”_第1张图片

     矩形

 

      圆形

 CSS中的“形状”_第2张图片

      椭圆形

 CSS中的“形状”_第3张图片

       尖角朝上的三角形

 CSS中的“形状”_第4张图片

       尖角朝下的三角形

 CSS中的“形状”_第5张图片

       尖角朝左的三角形

 CSS中的“形状”_第6张图片

       尖角朝右的三角形

 CSS中的“形状”_第7张图片

    尖角在左上的三角形

 

    尖角在右上的三角形

 CSS中的“形状”_第8张图片

    尖角在左下的三角形

 CSS中的“形状”_第9张图片

    尖角在右下的三角形

 CSS中的“形状”_第10张图片

    弯尾箭头

 CSS中的“形状”_第11张图片

    梯形

 

    平行四边形

 CSS中的“形状”_第12张图片

    六角星形

 CSS中的“形状”_第13张图片

    五角星形

 CSS中的“形状”_第14张图片

    五边形

 CSS中的“形状”_第15张图片

    六边形

 CSS中的“形状”_第16张图片

    八边形

 CSS中的“形状”_第17张图片

    心形

 CSS中的“形状”_第18张图片

    横8形

 CSS中的“形状”_第19张图片

    正方片形

 CSS中的“形状”_第20张图片

    金刚盾形

 CSS中的“形状”_第21张图片

    方片形

 CSS中的“形状”_第22张图片

    钻石形

 CSS中的“形状”_第23张图片

    鸡蛋型

 

    吃豆人

 CSS中的“形状”_第24张图片

    提示框

 

    12角形

 CSS中的“形状”_第25张图片

        8角形

 CSS中的“形状”_第26张图片

        八卦

 CSS中的“形状”_第27张图片

        丝带徽章

 

        太空侵略者

 CSS中的“形状”_第28张图片

        电视屏幕

 CSS中的“形状”_第29张图片

        雪佛龙

 CSS中的“形状”_第30张图片

        放大镜

 CSS中的“形状”_第31张图片

        Facebook icon

 

        扇形

 

        月亮弯形

 CSS中的“形状”_第32张图片

        旗

 

 CSS中的“形状”_第33张图片


原文链接:http://css-tricks.com/examples/ShapesOfCSS/

你可能感兴趣的:(css,多边形,Shapes)