纯CSS实现各种图形效果分享

原创 彭淇  2017-08-09 07:57:40  阅读 2007 次 评论 1 条

纯CSS实现各种图形效果分享

CSS可以实现任意的图形,特别是CSS3的圆角、旋转、倾斜等效果出现之后,CSS2要想出现斜线,可利用border的特性,利用相邻的边框不同颜色出现斜线的特点,自己体会吧^_^

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>飞翔勿扰-纯CSS实现各种图形效果分享</title>
<style>
#header { width: 800px; margin: 40px auto 20px; }
h1 { position: relative; width: 50%; padding: 10px 20px; border-radius: 0 0 2px 2px; margin: 0 auto; font-size: 20px; font-weight: normal; color: #FFF; background-color: #206020; text-align: center; text-transform: uppercase; }
h1:before,
h1:after { content: ''; position: absolute; display: block; top: -6px; border: 18px solid #103010; }
h1:before { left: -35px; border-right-width: 18px; border-left-color: transparent; }
h1:after { right: -35px; border-left-width: 18px; border-right-color: transparent; }
h1 span:before,
h1 span:after { content: ''; position: absolute; display: block; border-style: solid; border-color: #083808 transparent transparent transparent; top: -6px; -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); }
h1 span:before { left: 0; border-width: 6px 0 0 6px; }
h1 span:after { right: 0; border-width: 6px 6px 0 0; }
#container { width: 800px; margin: 30px auto; background-color: #eee; }
div { margin: 20px auto; text-align: center; }

/*实心前景和背景*/
.solid { color: #FFF; background-color: green; }

/*空心前景和背景*/
.hollow { color: green; background-color: #FFF; border: 4px solid green; }

/*长方形*/
.rectangle { width: 200px; height: 100px; line-height: 100px; }

/*椭圆长方形*/
.rectangleellipse { position: relative; width: 200px; height: 100px; line-height: 100px; border-radius: 10%/50%; }

/*正方形*/
.square { width: 200px; height: 200px; line-height: 200px; }

/*圆形*/
.circle { width: 200px; height: 200px; line-height: 200px; border-radius: 50%; }

/*实心半圆*/
.halfcirclesolid { width: 200px; height: 100px; line-height: 100px; border-radius: 100px 100px 0 0; color: #FFF; background-color: green; }

/*空心半圆形*/
.halfcirclehollow { width: 200px; height: 100px; line-height: 100px; border: 2px solid green; border-radius: 100px 100px 0 0; color: green; }

/*斜半圆形*/
.italichalfcirclehollow { width: 200px; height: 200px; line-height: 200px; border-width: 2px; border-style: solid; border-color: green transparent transparent green; border-radius: 100px; color: green; }

/*圆锥*/
.cone { width: 0; height: 0; padding: 0; border-left: 60px solid transparent; border-right: 60px solid transparent; border-top: 100px solid green; border-radius: 50%; }

/*弯月亮*/
.moon { width: 200px; height: 200px; padding: 0; border-radius: 50%; box-shadow: 30px 30px 0 0 green; margin-bottom: 30px; }

/*椭圆*/
.ellipse { width: 200px; height: 100px; line-height: 100px; border-radius: 50%/50%; }

/*三角形*/
.triangle { width: 0; height: 0; padding: 0; font-size: 0; line-height: 0; }

/*四色正方形*/
.colorful { border-top: 100px solid red; border-right: 100px solid green; border-bottom: 100px solid blue; border-left: 100px solid yellow; }

/*实心上直角三角形*/
.rgtsolidtop { border-left: 100px solid transparent; border-right: 100px solid transparent; border-bottom: 100px solid green; }

/*实心右直角三角形*/
.rgtsolidright { border-top: 100px solid transparent; border-bottom: 100px solid transparent; border-left: 100px solid green; }

/*实心下直角三角形*/
.rgtsolidbottom { border-left: 100px solid transparent; border-right: 100px solid transparent; border-top: 100px solid green; }

/*实心左直角三角形*/
.rgtsolidleft { border-top: 100px solid transparent; border-bottom: 100px solid transparent; border-right: 100px solid green; }

/*实心左上直角三角形*/
.rgtsolidlefttop { border-top: 100px solid green; border-right: 100px solid transparent; border-bottom: 100px solid transparent; border-left: 100px solid green; }

/*实心右上直角三角形*/
.rgtsolidrighttop { border-top: 100px solid green; border-right: 100px solid green; border-bottom: 100px solid transparent; border-left: 100px solid transparent; }

/*实心右下直角三角形*/
.rgtsolidrightbottom { border-top: 100px solid transparent; border-right: 100px solid green; border-bottom: 100px solid green; border-left: 100px solid transparent; }

/*实心左下直角三角形*/
.rgtsolidleftbottom { border-top: 100px solid transparent; border-right: 100px solid transparent; border-bottom: 100px solid green; border-left: 100px solid green; }

/*上等边三角形*/
.eqsolidtop { border-left: 100px solid transparent; border-right: 100px solid transparent; border-bottom: 173px solid green; }

/*右等边三角形*/
.eqsolidright { border-top: 100px solid transparent; border-bottom: 100px solid transparent; border-left: 173px solid green; }

/*下等边三角形*/
.eqsolidbottom { border-left: 100px solid transparent; border-right: 100px solid transparent; border-top: 173px solid green; }

/*左等边三角形*/
.eqsolidleft { border-top: 100px solid transparent; border-bottom: 100px solid transparent; border-right: 173px solid green; }

/*平行四边形*/
.parallelogram { position: relative; width: 240px; height: 120px; padding: 0; }
.parallelogram::before { content: ''; position: absolute; left: 0; top: 0; display: block; width: 0; height: 0; border-width: 60px; border-style: solid; border-color: transparent green green transparent; }
.parallelogram::after { content: ''; position: absolute; right: 0; top: 0; display: block; width: 0; height: 0; border-width: 60px; border-style: solid; border-color: green transparent transparent green; }

/*平行四边形组成的进度条*/
.progressbar { width: 100%; height: 18px; border: 2px solid green; text-align: left; overflow: hidden; }
.progressbar .parallelogram { display: inline-block; width: 40px; height: 20px; padding: 0; margin: 0; }
.progressbar .parallelogram::before,
.progressbar .parallelogram::after { border-width: 10px; }
.progressbar .parallelogram { right: 100%; -webkit-transition: right 4s linear; -moz-transition: right 4s linear; -ms-transition: right 4s linear; -o-transition: right 4s linear; transition: right 4s linear; }
.progressbar:hover .parallelogram { right: 0; }

/*梯形*/
.trapezoid { width: 120px; height: 0; padding: 0; border-top: 120px solid green; border-left: 60px solid transparent; border-right: 60px solid transparent; }

/*五边形*/
.pentagon { position: relative; width: 100px; border-width: 95px 31px 0; border-style: solid; border-color: green transparent; margin-top: 100px; }
.pentagon::before { content: ''; position: absolute; top: -152px; left: -31px; width: 0; height: 0; border-width: 0 81px 59px; border-style: solid; border-color: transparent transparent green; }

/*六边形*/
.hexagon { position: relative; width: 208px; height: 120px; line-height: 120px; margin-top: 120px; color: #FFF; background-color: green; }
.hexagon::before { content: ''; position: absolute; top: -60px; left: 0; width: 0; height: 0; border-width: 0 104px 60px; border-style: solid; border-color: transparent transparent green; }
.hexagon::after { content: ''; position: absolute; bottom: -60px; left: 0; width: 0; height: 0; border-width: 60px 104px 0; border-style: solid; border-color: green transparent transparent; }

/*八边形*/
.octagon { position: relative; width: 241px; height: 100px; line-height: 100px; margin: 200px auto; color: #FFF; background-color: green; }
.octagon::before { content: ''; position: absolute; top: -70px; left: 0; width: 100px; height: 0; border-width: 0 71px 71px; border-style: solid; border-color: transparent transparent green; }
.octagon::after { content: ''; position: absolute; bottom: -70px; left: 0; width: 100px; height: 0; border-width: 71px 71px 0; border-style: solid; border-color: green transparent transparent; }

/*耳朵*/
.angletwo { position: relative; display: inline-block; width: 240px; height: 120px; }
.angletwo::before { content: ''; position: absolute; left: 0; top: 0; display: block; width: 0; height: 0; border-width: 60px; border-style: solid; border-color: transparent transparent green green; }
.angletwo::after { content: ''; position: absolute; right: 0; top: 0; display: block; width: 0; height: 0; border-width: 60px; border-style: solid; border-color: transparent green green transparent; }
.anglefour { position: relative; width: 360px; height: 360px; padding: 0; }

/*飞镖*/
.fourtop { position: absolute; left: 120px; top: 0; display: block; width: 0; height: 0; padding: 0; border-right: 60px solid transparent; border-bottom: 120px solid green; border-left: 60px solid transparent; }
.fourright { position: absolute; right: 0; top: 120px; display: block; width: 0; height: 0; padding: 0; border-top: 60px solid transparent; border-bottom: 60px solid transparent; border-left: 120px solid green; }
.fourbottom { position: absolute; left: 120px; top: 240px; display: block; width: 0; height: 0; padding: 0; border-top: 120px solid green; border-right: 60px solid transparent; border-left: 60px solid transparent; }
.fourleft { position: absolute; left: 0; top: 120px; display: block; width: 0; height: 0; padding: 0; border-top: 60px solid transparent; border-right: 120px solid green; border-bottom: 60px solid transparent; }
.fourmiddle { position: absolute; left: 120px; top: 120px; display: block; width: 120px; height: 120px; background-color: green; }

/*钻石*/
.diamond { position: relative; width: 120px; height: 0; border-style: solid; border-color: transparent transparent green transparent; border-width: 0 60px 60px 60px; margin-bottom: 300px; color: #FFF; }
.diamond::after { content: ''; position: absolute; top: 60px; left: -60px; width: 0; height: 0; border-width: 200px 120px 0; border-style: solid; border-color: green transparent transparent; }

/*心形*/
.heart { position: relative; width: 200px; height: 180px; padding: 0; }
.heart::before { content: ''; position: absolute; width: 100px; height: 160px; left: 100px; top: 0; border-radius: 100px 100px 0 0; background-color: green; -webkit-transform-origin: 0 100%; -ms-transform-origin: 0 100%; -moz-transform-origin: 0 100%; -o-transform-origin: 0 100%; tansform-origin: 0 100%; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); }
.heart::after { content: ''; position: absolute; width: 100px; height: 160px; left: 0; top: 0; border-radius: 100px 100px 0 0; background-color: green; -webkit-transform-origin: 100% 100%; -ms-transform-origin: 100% 100%; -moz-transform-origin: 100% 100%; -o-transform-origin: 100% 100%; transform-origin: 100% 100%; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); }

/*向右下弯尾箭头*/
.curvearrowrightbottom { position: relative; width: 0; height: 0; border-top: 100px solid transparent; border-right: 100px solid green; -webkit-transform: rotate(10deg); -moz-transform: rotate(10deg); -ms-transform: rotate(10deg); -o-transform: rotate(10deg); transform: rotate(10deg); }
.curvearrowrightbottom::after { content: ""; position: absolute; top: -120px; left: -90px; width: 120px; height: 120px; border-top: 30px solid green; border-radius: 120px 0 0 0; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); }

/*向左上弯尾箭头*/
.curvearrowlefttop { position: relative; width: 0; height: 0; border-bottom: 100px solid transparent; border-left: 100px solid green; -webkit-transform: rotate(-10deg); -moz-transform: rotate(10deg); -ms-transform: rotate(10deg); -o-transform: rotate(10deg); transform: rotate(10deg); }
.curvearrowlefttop::after { content: ""; position: absolute; top: -30px; right: -90px; width: 120px; height: 120px; border-bottom: 30px solid green; border-radius: 0 0 120px 0; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); }

/*蝴蝶结*/
.bow { position: relative; width: 240px; height: 120px; }
.bow::before { content: ''; position: absolute; top: 0; left: 0; width: 60px; height: 60px; border: 20px solid green; border-radius: 60px 60px 0 60px; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); }
.bow::after { content: ''; position: absolute; top: 0; left: 120px; width: 60px; height: 60px; border: 20px solid green; border-radius: 0 60px 60px 60px; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); }

/*气球*/
.balloon { position: relative; width: 60px; height: 120px; }
.balloon::before { content: ''; position: absolute; top: 0; left: 0; width: 60px; height: 60px; border-radius: 60px 60px 60px 0; background-color: green; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); }
.balloon::after { content: ''; position: absolute; top: 70px; left: 30px; width: 1px; height: 60px; background-color: green; }

/*鸡蛋*/
.egg { width: 160px; height: 260px; padding: 0; background-color: green; border-radius: 50% 50% 50% 50%/60% 60% 40% 40%; }

/*吃货*/
.foodie { width: 0; height: 0; padding: 0; border-width: 60px; border-style: solid; border-color: green transparent green green; border-radius: 60px; }

/*太极*/
.taiji { position: relative; width: 192px; height: 96px; padding: 0; border-color: green; border-style: solid; border-width: 4px 4px 100px 4px; border-radius: 100%; background-color: #fff; }
.taiji::before,
.taiji::after { content: ''; position: absolute; width: 24px; height: 24px; top: 50%; border-radius: 100%; }
.taiji::before { left: 0; border: 36px solid green; background-color: #fff; }
.taiji::after { left: 50%; border: 36px solid #fff; background-color: green; }

/*五角星*/
.starfive { position: relative; width: 0; height: 0; border-left: 200px solid transparent; border-right: 200px solid transparent; border-bottom: 145px solid green; margin: 200px auto 100px; -moz-transfrom: rotate(36deg); -webkit-transform: rotate(36deg); -ms-transform: rotate(36deg); -o-transform: rotate(36deg); transform: rotate(36deg); }
.starfive::before { position: absolute; left: -210px; top: 8px; display: block; content: ''; width: 0; height: 0; border-left: 200px solid transparent; border-right: 200px solid transparent; border-bottom: 145px solid green; -moz-transfrom: rotate(-72deg); -webkit-transform: rotate(-72deg); -ms-transform: rotate(-72deg); -o-transform: rotate(-72deg); transform: rotate(-72deg); }
.starfive::after { position: absolute; left: -196px; top: 0; display: block; content: ''; width: 0; height: 0; border-left: 200px solid transparent; border-right: 200px solid transparent; border-bottom: 145px solid green; -moz-transfrom: rotate(72deg); -webkit-transform: rotate(72deg); -ms-transform: rotate(72deg); -o-transform: rotate(72deg); transform: rotate(72deg); }

/*六角星*/
.starsix { position: relative; width: 0; height: 0; margin: 100px auto; border-left: 100px solid transparent; border-right: 100px solid transparent; border-bottom: 200px solid green; }
.starsix::after { content: ''; position: absolute; top: 60px; left: -100px; width: 0; height: 0; border-top: 200px solid green; border-left: 100px solid transparent; border-right: 100px solid transparent; }

/*八角星*/
.stareight { position: relative; width: 200px; height: 200px; line-height: 200px; margin: 50px auto; color: #FFF; background-color: green; }
.stareight::before { content: ''; position: absolute; top: 0; left: 0; width: 200px; height: 200px; background-color: green; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); }

/*十二角星*/
.startwelve { position: relative; width: 200px; height: 200px; margin: 50px auto; background-color: green; }
.startwelve::before,
.startwelve::after { content: ''; position: absolute; top: 0; left: 0; width: 200px; height: 200px; top: 0; left: 0; background-color: green; }
.startwelve::before { -webkit-transform: rotate(30deg); -ms-transform: rotate(30deg); -moz-transform: rotate(30deg); -o-transform: rotate(30deg); transform: rotate(30deg); }
.startwelve::after { -webkit-transform: rotate(60deg); -ms-transform: rotate(60deg); -moz-transform: rotate(60deg); -o-transform: rotate(60deg); transform: rotate(60deg); }

/*对话气泡框*/
.talkbubble { position: relative; width: 160px; height: 80px; padding: 20px; border-radius: 10px; color: #FFF; background-color: green; text-align: left; }
.talkbubble::before { content: ''; position: absolute; right: 100%; top: 40px; width: 0; height: 0; border-top: 15px solid transparent; border-right: 30px solid green; border-bottom: 15px solid transparent; }
    </style>
</head>

<body>
    <header id="header"><h1><span>迷津渡口-纯CSS图形分享</span></h1></header>
    <div id="container">
        <!-- 实心长方形 -->
        <div class="rectangle solid">实心长方形</div>
        <!-- 长方形 -->
        <div class="rectangle hollow">长方形</div>
        <!-- 实心椭圆长方形 -->
        <div class="rectangleellipse solid">实心椭圆长方形</div>
        <!-- 椭圆长方形 -->
        <div class="rectangleellipse hollow">椭圆长方形</div>
        <!-- 实心正方形 -->
        <div class="square solid">实心正方形</div>
        <!-- 正方形 -->
        <div class="square hollow">正方形</div>
        <!-- 实心圆 -->
        <div class="circle solid">实心圆</div>
        <!-- 圆形 -->
        <div class="circle hollow">圆形</div>
        <!-- 半实心圆 -->
        <div class="halfcirclesolid">半实心圆</div>
        <!-- 半圆形 -->
        <div class="halfcirclehollow">半圆形</div>
        <!-- 斜半圆形 -->
        <div class="italichalfcirclehollow">斜半圆形</div>
        <!-- 圆锥 -->
        <div class="cone"></div>
        <p>圆锥</p>
        <!-- 弯月亮 -->
        <div class="moon"></div>
        <p>弯月亮</p>
        <!-- 实心椭圆 -->
        <div class="ellipse solid">实心椭圆</div>
        <!-- 椭圆 -->
        <div class="ellipse hollow">椭圆</div>
        <!-- 四色正方形 -->
        <div class="triangle colorful"></div>
        <p>四色正方形</p>
        <!-- 实心上直角三角形 -->
        <div class="triangle rgtsolidtop"></div>
        <p>实心上直角三角形</p>
        <!-- 实心右直角三角形 -->
        <div class="triangle rgtsolidright"></div>
        <p>实心右直角三角形</p>
        <!-- 实心下直角三角形 -->
        <div class="triangle rgtsolidbottom"></div>
        <p>实心下直角三角形</p>
        <!-- 实心左边直角三角形 -->
        <div class="triangle rgtsolidleft"></div>
        <p>实心左直角三角形</p>
        <!-- 实心左上直角三角形 -->
        <div class="triangle rgtsolidlefttop"></div>
        <p>实心左上直角三角形</p>
        <!-- 实心右上直角三角形 -->
        <div class="triangle rgtsolidrighttop"></div>
        <p>实心右上直角三角形</p>
        <!-- 实心右下直角三角形 -->
        <div class="triangle rgtsolidrig


本文地址:http://pengqi.club/blog/7.html
版权声明:本文为原创文章,版权归 彭淇 所有,欢迎分享本文,转载请保留出处!

发表评论


表情

评论列表

  1. 任林
    任林 【县长】  @回复

    [code][S19]好羞射,文章真的好赞啊,顶博主![/code]