HTML怎么写入形状,css3写各种形状（收集篇...）

圆

width:120px;

height:120px;

border-radius:60px;

正方形

width:120px;

height:120px;

椭圆

width:200px;

height:100;

border-radius:100px;

三角(正)

width:0;

height:0;

border-bottom: 140px solid #fcf921;

border-left: 70px solid transparent;

border-right: 70px solid transparent;

三角形(倒)

width: 0;

height: 0;

border-top: 140px solid #20a3bf;

border-left: 70px solid transparent;

border-right: 70px solid transparent;三角形(左)

width: 0;

height: 0;

border-top: 70px solid transparent;

border-right: 140px solid #6bbf20;

border-bottom: 70px solid transparent;

三角形(右)

width: 0;

height: 0;

border-top: 70px solid transparent;

border-left: 140px solid #ff5a00;

border-bottom: 70px solid transparent;

菱形

width: 120px;

height: 120px;

background: #1eff00;

/* Rotate */

-webkit-transform: rotate(-45deg);

-moz-transform: rotate(-45deg);

-ms-transform: rotate(-45deg);

-o-transform: rotate(-45deg);

transform: rotate(-45deg);

/* Rotate Origin */

-webkit-transform-origin: 0 100%;

-moz-transform-origin: 0 100%;

-ms-transform-origin: 0 100%;

-o-transform-origin: 0 100%;

transform-origin: 0 100%;

margin: 60px 0 10px 310px;

梯形

height: 0;

width: 120px;

border-bottom: 120px solid #ec3504;

border-left: 60px solid transparent;

border-right: 60px solid transparent;

平行四边形

width: 160px;

height: 100px;

background: #8734f7;

-webkit-transform: skew(30deg);

-moz-transform: skew(30deg);

-o-transform: skew(30deg);

transform: skew(30deg);

五角星

#star {

width: 0;

height: 0;

margin: 50px 0;

color: #fc2e5a;

position: relative;

display: block;

border-right: 100px solid transparent;

border-bottom: 70px solid #fc2e5a;

border-left: 100px solid transparent;

-moz-transform: rotate(35deg);

-webkit-transform: rotate(35deg);

-ms-transform: rotate(35deg);

-o-transform: rotate(35deg);

}

#star:before {

height: 0;

width: 0;

position: absolute;

display: block;

top: -45px;

left: -65px;

border-bottom: 80px solid #fc2e5a;

border-left: 30px solid transparent;

border-right: 30px solid transparent;

content: '';

-webkit-transform: rotate(-35deg);

-moz-transform: rotate(-35deg);

-ms-transform: rotate(-35deg);

-o-transform: rotate(-35deg);

}

#star:after {

content: '';

width: 0;

height: 0;

position: absolute;

display: block;

top: 3px;

left: -105px;

color: #fc2e5a;

border-right: 100px solid transparent;

border-bottom: 70px solid #fc2e5a;

border-left: 100px solid transparent;

-webkit-transform: rotate(-70deg);

-moz-transform: rotate(-70deg);

-ms-transform: rotate(-70deg);

-o-transform: rotate(-70deg);

}

六角星

#star_six_points {

width: 0;

height: 0;

display: block;

position: absolute;

border-left: 50px solid transparent;

border-right: 50px solid transparent;

border-bottom: 100px solid #de34f7;

margin: 10px auto;

}

#star_six_points:after {

content: "";

width: 0;

height: 0;

position: absolute;

border-left: 50px solid transparent;

border-right: 50px solid transparent;

border-top: 100px solid #de34f7;

margin: 30px 0 0 -50px;

}

五边形(创建CSS五边形需要结合两个图形：一个梯形，然后在它的上面放一个三角形，共同组成一个五边形)

#pentagon {

width: 54px;

position: relative;

border-width: 50px 18px 0;

border-style: solid;

border-color: #277bab transparent;

}

#pentagon:before {

content: "";

height: 0;

width: 0;

position: absolute;

top: -85px;

left: -18px;

border-width: 0 45px 35px;

border-style: solid;

border-color: transparent transparent #277bab;

}

六边形(像五边形一样，先制作一个长方形，然后在它的上面和下面各放置一个三角形。)

#hexagon {

width: 100px;

height: 55px;

background: #fc5e5e;

position: relative;

margin: 10px auto;

}

#hexagon:before {

content: "";

width: 0;

height: 0;

position: absolute;

top: -25px;

left: 0;

border-left: 50px solid transparent;

border-right: 50px solid transparent;

border-bottom: 25px solid #fc5e5e;

}

#hexagon:after {

content: "";

width: 0;

height: 0;

position: absolute;

bottom: -25px;

left: 0;

border-left: 50px solid transparent;

border-right: 50px solid transparent;

border-top: 25px solid #fc5e5e;

}

八角形(先制作两个相同的梯形，然后在两边分别放置一个三角形。)

#octagon {

width: 100px;

height: 100px;

background: #ac60ec;

position: relative;

}

#octagon:before {

content: "";

width: 42px;

height: 0;

position: absolute;

top: 0;

left: 0;

border-bottom: 29px solid #ac60ec;

border-left: 29px solid #f4f4f4;

border-right: 29px solid #f4f4f4;

}

#octagon:after {

content: "";

width: 42px;

height: 0;

position: absolute;

bottom: 0;

left: 0;

border-top: 29px solid #ac60ec;

border-left: 29px solid #f4f4f4;

border-right: 29px solid #f4f4f4;

}

心形(使用伪元素来制作，分别将伪元素旋转不同的角度，并修改transform-origin属性来元素的旋转中心点。)

#heart {

position: relative;

}

#heart:before,#heart:after {

content: "";

width: 70px;

height: 115px;

position: absolute;

background: red;

left: 70px;

top: 0;

-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);

-webkit-transform-origin: 0 100%;

-moz-transform-origin: 0 100%;

-ms-transform-origin: 0 100%;

-o-transform-origin: 0 100%;

transform-origin: 0 100%;

}

#heart:after {

left: 0;

-webkit-transform: rotate(45deg);

-moz-transform: rotate(45deg);

-ms-transform: rotate(45deg);

-o-transform: rotate(45deg);

transform: rotate(45deg);

-webkit-transform-origin: 100% 100%;

-moz-transform-origin: 100% 100%;

-ms-transform-origin: 100% 100%;

-o-transform-origin: 100% 100%;

transform-origin: 100% 100%;

}

鸡蛋形(蛋形时椭圆形的一个变体，它的高度要比宽度稍大，并且设置正确的border-radius属性即可以制作出一个蛋形。)

#egg {

width: 136px;

height: 190px;

background: #ffc000;

display: block;

-webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px;

border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;

}

无穷符号(无穷符号可以通过border属性和设置伪元素的角度来实现。)

#infinity {

width: 220px;

height: 100px;

position: relative;

}

#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;

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);

}

消息提示框

#comment_bubble {

width: 140px;

height: 100px;

background: #088cb7;

position: relative;

-moz-border-radius: 12px;

-webkit-border-radius: 12px;

border-radius: 12px;

}

#comment_bubble:before {

content: "";

width: 0;

height: 0;

right: 100%;

top: 38px;

position: absolute;

border-top: 13px solid transparent;

border-right: 26px solid #088cb7;

border-bottom: 13px solid transparent;

}

吃豆小怪兽(先在一个圆形里面制作一个透明的三角形。)

#pacman {

width: 0;

height: 0;

border-right: 70px solid transparent;

border-top: 70px solid #ffde00;

border-left: 70px solid #ffde00;

border-bottom: 70px solid #ffde00;

border-top-left-radius: 70px;

border-top-right-radius: 70px;

border-bottom-left-radius: 70px;

border-bottom-right-radius: 70px;

}