首页 > > 网页制作 > css >

CSS画各种二维图形

2018-06-24 02:21:09来源：未知阅读 ()

1.效果

2.源码

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <style type="text/css">
        #triangle_top{
            display: inline-block;
            width:0;
            height:0;
            border-left:50px solid transparent;
            border-right: 50px solid transparent;
            border-bottom:100px solid blue;
        }
        #triangle_bottom{
            display: inline-block;
            width:0;
            height:0;
            border-left:50px solid transparent;
            border-right:50px solid transparent;
            border-top:100px solid blue;
        }
        #triangle_left{
            display: inline-block;
            width:0;
            height:0;
            border-bottom:50px solid transparent;
            border-top:50px solid transparent;
            border-right:100px solid blue;
        }
        #triangle_right{
            display: inline-block;
            width:0;
            height:0;
            border-bottom:50px solid transparent;
            border-top:50px solid transparent;
            border-left:100px solid blue;
        }
        #right_triangle_top_left{
            display: inline-block;
            width:0;
            height:0;
            border-right:100px solid transparent;
            border-top:100px solid blue;
        }
        #right_triangle_top_right{
            display: inline-block;
            width:0;
            height:0;
            border-left:100px solid transparent;
            border-top:100px solid blue;
        }
        #right_triangle_bottom_left{
            display:inline-block;
            width:0;
            height:0;
            border-right:100px solid transparent;
            border-bottom:100px solid blue;
        }
        #right_triangle_bottom_right{
            display: inline-block;
            width:0;
            height:0;
            border-left:100px solid transparent;
            border-bottom:100px solid blue;
        }
        #circle{
            display: inline-block;
            width: 100px;
            height: 100px;
            background: blue;
            -webkit-border-radius: 50px;
            -moz-border-radius: 50px;
            border-radius: 50px;
        }
        #oval{
            display: inline-block;
            width:100px;
            height:50px;
            background-color: blue;
            -webkit-border-radius:50px/25px;
            -moz-border-radius:50px/25px;
            border-radius:50px/25px;
        }
        #trapezium{
            display: inline-block;
            height: 0;
            width: 100px;
            border-bottom: 100px solid blue;
            border-left: 50px solid transparent;
            border-right: 50px solid transparent;
        }
        #parallelogram{
            display: inline-block;
            height: 100px;
            width: 100px;
            background-color: blue;
            -webkit-transform: skewX(30deg);
            -moz-transform: skewX(30deg);
            -ms-transform: skewX(30deg);
            -o-transform: skewX(30deg);
            transform: skewX(30deg);
            transform-origin: 0 0;
        }
        #star {
            width: 0;
            height: 0;
            display: inline-block;
            border-right: 100px solid transparent;
            border-left: 100px solid transparent;
            border-bottom: 70px solid red;
            -moz-transform: rotate(35deg);
            -webkit-transform: rotate(35deg);
            -ms-transform: rotate(35deg);
            -o-transform: rotate(35deg);
            transform-origin: 80px 120px;
        }
        #star:before {
            content: '';
            height: 0;
            width: 0;
            display: inline-block;
            position: relative;
            top: -45px;
            left: -65px;
            border-left: 30px solid transparent;
            border-right: 30px solid transparent;
            border-bottom: 80px solid red;
            -webkit-transform: rotate(-35deg);
            -moz-transform: rotate(-35deg);
            -ms-transform: rotate(-35deg);
            -o-transform: rotate(-35deg);
            transform: rotate(-35deg);
        }
        #star:after{
            content: '';
            height:0;
            width:0;
            display: inline-block;
            position: relative;
            top: -78px;
            left: -105px;
            border-right: 100px solid transparent;
            border-left: 100px solid transparent;
            border-bottom: 70px solid red;
            -webkit-transform: rotate(-70deg);
            -moz-transform: rotate(-70deg);
            -ms-transform: rotate(-70deg);
            -o-transform: rotate(-70deg);
            transform: rotate(-70deg);
        }
        #star_six_points {
            width: 0;
            height: 0;
            position: relative;
            top: -50px;
            left: 50px;
            display: inline-block;
            border-left: 50px solid transparent;
            border-right: 50px solid transparent;
            border-bottom: 100px solid red;
        }
        #star_six_points:after{
            content: '';
            width:0;
            height:0;
            display: inline-block;
            position: absolute;
            top:35px;
            left:-50px;
            border-left: 50px solid transparent;
            border-right: 50px solid transparent;
            border-top: 100px solid red;
        }
        #hexagon{
            width:100px;
            height:50px;
            display: inline-block;
            position: relative;
            left: 80px;
            top: -50px;
            background-color: red;
        }
        #hexagon:before{
            content: '';
            width:0;
            height:0;
            display: inline-block;
            position: absolute;
            top: -25px;
            left: 0;
            border-left: 50px solid transparent;
            border-right: 50px solid transparent;
            border-bottom: 25px solid red;
        }
        #hexagon:after{
            content: '';
            width:0;
            height:0;
            display: inline-block;
            position: absolute;
            top: 50px;
            left: 0;
            border-left: 50px solid transparent;
            border-right: 50px solid transparent;
            border-top: 25px solid red;
        }
        #heart {
            top:-120px;
            left: 120px;
            position: relative;
            display: inline-block;
        }
        #heart:before,#heart:after {
            content: "";
            width: 70px;
            height: 115px;
            position: absolute;
            background: red;
            display: inline-block;
            -webkit-border-radius: 50px 50px 0 0;
            -moz-border-radius: 50px 50px 0 0;
            border-radius: 50px 50px 0 0;
            -webkit-transform: rotate(-45deg);
            -moz-transform: rotate(-45deg);
            -ms-transform: rotate(-45deg);
            -o-transform: rotate(-45deg);
            transform: rotate(-45deg);
        }
        #heart:after {
            left: 32px;
            -webkit-transform: rotate(45deg);
            -moz-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
            -o-transform: rotate(45deg);
            transform: rotate(45deg);
        }
        #egg{
            width: 136px;
            height: 190px;
            position: relative;
            left: 260px;
            background: #ffc000;
            display: inline-block;
            -webkit-border-radius:63px 63px 63px 63px / 108px 108px 72px 72px;
            -moz-border-radius:63px 63px 63px 63px / 108px 108px 72px 72px;
            border-radius:63px 63px 63px 63px / 108px 108px 72px 72px;
        }
        #infinity{
            width: 220px;
            height: 100px;
            position: relative;
            display: inline-block;
            left: 280px;
        }
        #infinity:before,#infinity:after {
            content: "";
            width: 60px;
            height: 60px;
            position: absolute;
            top: 0;
            left: 0;
            border: 20px solid #06c999;
            -moz-border-radius: 50px 50px 0 50px;
            border-radius: 50px 50px 0 50px;
            -webkit-transform: rotate(-45deg);
            -moz-transform: rotate(-45deg);
            -ms-transform: rotate(-45deg);
            -o-transform: rotate(-45deg);
            transform: rotate(-45deg);
        }
        #infinity:after {
            left: auto;
            right: 0;
            -moz-border-radius: 50px 50px 50px 0;
            border-radius: 50px 50px 50px 0;
            -webkit-transform: rotate(45deg);
            -moz-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
            -o-transform: rotate(45deg);
            transform: rotate(45deg);
        }
    </style>
</head>
<body>
<div id="triangle_top"></div>
<div id="triangle_bottom"></div>
<div id="triangle_left"></div>
<div id="triangle_right"></div>
<div id="right_triangle_top_left"></div>
<div id="right_triangle_top_right"></div>
<div id="right_triangle_bottom_left"></div>
<div id="right_triangle_bottom_right"></div>
<div id="circle"></div>
<div id="oval"></div>
<div id="trapezium"></div>
<div id="parallelogram"></div>
<div id="star"></div>
<div id="star_six_points"></div>
<div id="hexagon"></div>
<div id="heart"></div>
<div id="egg"></div>
<div id="infinity"></div>
</body>
</html>