郑州制作网站推荐,1元云主机,百度网页推广怎么做,江门网站制作报价转载链接#xff1a;http://www.w3cplus.com/css/css-simple-shapes-cheat-sheet 前面在《纯CSS制作的图形效果》一文中介绍了十六种CSS画各种不同图形的方法。今天花了点时间将这方面的制作成一份清单#xff0c;方便大家急用时有地方可查。别的不多说了#xff0c;直接看代…转载链接http://www.w3cplus.com/css/css-simple-shapes-cheat-sheet 前面在《纯CSS制作的图形效果》一文中介绍了十六种CSS画各种不同图形的方法。今天花了点时间将这方面的制作成一份清单方便大家急用时有地方可查。别的不多说了直接看代码。 为了节省时间下面图形都采用的一个标签可以是块元素也可以是行内元素不过行内元素需要加上“display:block;”唯一不同的是在此用了不同的类名来区别相关类名我放在了标题的后面以便大家对应查看。 1、正方形square CSS Code: .square {width: 100px;height:100px;background: #E5C3B2;
} 上面的方法是设置宽度和高度一致就可以实现正方形的效果下面展示一种boder制作正方形的效果 .square {width:0;height:0;border: 50px solid #E5C3B2;/*边框大小等于正方形宽度或高度的一半*/
} 效果 2、平行四边形parallelogram CSS Code: .parallelogram {width: 100px;height: 70px;-webkit-transform: skew(20deg);-moz-transform: skew(20deg);-o-transform: skew(20deg);-ms-transform: skew(20deg);transform: skew(20deg);background: #E5C3B2;
} 效果 我们可以通过“skew”的值大小来控制角度如果其值为负值将会改变扭曲方向 .parallelogram2 {width:100px;height:70px;-webkit-transform:skew(-20deg);-moz-transform:skew(-20deg);-o-transform:skew(-20deg);-ms-transform:skew(-20deg);transform:skew(-20deg);background:#E5C3B2;
}效果 3、菱形(diamond) CSS Code:.diamond {
width:80px;
height:80px;
margin:40px 0 0 40px;
-webkit-transform-origin:0 100%;
-moz-transform-origin:0 100%;
-o-transform-origin:0 100%;
-ms-transform-origin:0 100%;
transform-origin:0 100%;
-webkit-transform:rotate(-45deg);
-moz-transform:rotate(-45deg);
-o-transform:rotate(-45deg);
-ms-transform:rotate(-45deg);
transform:rotate(-45deg);
background:#E5C3B2;
}效果 4、长方形 CSS Code: .rectangle {width:100px;height:50px;background:#E5C3B2;
}效果 5、梯形trapezoid 梯形一 CSS Code: .trapezoid-1 {height:0;width:100px;border-bottom:100px solid #e5c3b2;border-left:60px solid transparent;border-right:60px solid transparent;
}效果 梯形二 CSS Code: .trapezoid-2 {height:0;width:100px;border-top:100px solid #e5c3b2;border-left:60px solid transparent;border-right:60px solid transparent;
}效果 梯形三 CSS Code: .trapezoid-3 {height:100px;width:0;border-right:100px solid #e5c3b2;border-top:60px solid transparent;border-bottom:60px solid transparent;
}效果 梯形四 CSS Code: .trapezoid-4 {height:100px;width:0;border-left:100px solid #e5c3b2;border-top:60px solid transparent;border-bottom:60px solid transparent;
} 效果 6、三角形triangle 三角形朝上 CSS Code: .triangle-up {height:0;width:0;border:50px solid #e5c3b2;border-color:transparent transparent #e5c3b2 transparent;
} 效果 三角朝右 CSS Code: .triangle-rihgt {height:0;width:0;border:50px solid #e5c3b2;border-color:transparent transparent transparent #e5c3b2;
} 效果 三角朝下 CSS Code: .triangle-down {height:0;width:0;border:50px solid #e5c3b2;border-color:#e5c3b2 transparent transparent transparent;
} 效果 三角朝左 CSS Code: .triangle-left {height:0;width:0;border:50px solid #e5c3b2;border-color:transparent #e5c3b2 transparent transparent;
} 效果 7、半圆semicircle 上半圆 CSS Code: .semicircle-top {background:#e5c3b2;height:25px;width:50px;-moz-border-radius:50px 50px 0 0;-webkit-border-radius:50px 50px 0 0;border-radius:50px 50px 0 0;
} 效果 右半圆 CSS Code: .semicircle-right {background:#e5c3b2;height:50px;width:25px;-moz-border-radius:0 0px 50px 0;-webkit-border-radius:0 50px 50px 0;border-radius:0 50px 50px 0;
} 效果 下半圆 CSS Code: .semicircle-down {background:#e5c3b2;height:25px;width:50px;-moz-border-radius:0 0 50px 50px;-webkit-border-radius:0 0 50px 50px;border-radius:0 0 50px 50px;
} 效果 左半圆 CSS Code: .semicircle-left {background:#e5c3b2;height:50px;width:25px;-moz-border-radius:50px 0 0 50px;-webkit-border-radius:50px 0 0 50px;border-radius:50px 0 0 50px;
}效果 8、圆circle CSS Code: .circle {background:#e5c3b2;height:50px;width:50px;-moz-border-radius:25px;-webkit-border-radius:25px;border-radius:25px;
} 效果 9、椭圆oval 水平椭圆 CSS Code: .ovalHor {background:#e5c3b2;height:40px;width:80px;-moz-border-radius:40px/20px;-webkit-border-radius:40px/20px;border-radius:40px/20px;
} 效果 垂直椭圆 CSS Code: .ovalVert {background:#e5c3b2;height:80px;width:40px;-moz-border-radius:20px/40px;-webkit-border-radius:20px/40px;border-radius:20px/40px;
} 效果 10、表图chartColorful CSS Code: .chartColorful {height:0px;width:0px;border:50px solid red;border-color:purple red yellow orange;-moz-border-radius:50px;-webkit-border-radius:50px;border-radius:50px;
} 效果 11、四分之一圆quarterCircle 四分之一圆上 CSS Code: .quarterCircleTop {background:#e5c3b2;height:50px;width:50px;-moz-border-radius:50px 0 0 0;-webkit-border-radius:50px 0 0 0;border-radius:50px 0 0 0;
} 效果 四分之一圆右 CSS Code: .quarterCircleRight {background:#e5c3b2;height:50px;width:50px;-moz-border-radius:0 50px 0 0;-webkit-border-radius:0 50px 0 0;border-radius:0 50px 0 0;
} 效果 四分之一圆下 CSS Code: .quarterCircleBottom {background:#e5c3b2;height:50px;width:50px;-moz-border-radius:0 0 50px 0;-webkit-border-radius:0 0 50px 0;border-radius:0 0 50px 0;
} 效果 四分之一圆左 CSS Code: .quarterCircleLeft {background:#e5c3b2;height:50px;width:50px;-moz-border-radius:0 0 0 50px;-webkit-border-radius:0 0 0 50px;border-radius:0 0 0 50px;
} 效果 12、ChartquarterCircle Chart上 CSS Code: .chartTop {height:0px;width:0px;border:50px solid #e5c3b2;border-top-color:transparent;-moz-border-radius:50px;-webkit-border-radius:50px;border-radius:50px;
} 效果 Chart右 CSS Code: .chartRight {height:0px;width:0px;border:50px solid #e5c3b2;border-right-color:transparent;-moz-border-radius:50px;-webkit-border-radius:50px;border-radius:50px;
} 效果 Chart下 CSS Code: .chartBottom {
height:0px;
width:0px;
border:50px solid #e5c3b2;
border-bottom-color:transparent;
-moz-border-radius:50px;
-webkit-border-radius:50px;
border-radius:50px;
} 效果 Chart左 CSS Code: .chartLeft {height:0px;width:0px;border:50px solid #e5c3b2;border-left-color:transparent;-moz-border-radius:50px;-webkit-border-radius:50px;border-radius:50px;
} 效果 13、心形heart 左心形 CSS Code .heartLeft {width:0;height:0;border-color:red;border-style:dotted;border-width:0 40px 40px 0;
} 效果 右心形 CSS Code .heartRight {width:0;height:0;border-color:red;border-style:dotted;border-width:0 0 40px 40px;
} 效果 14、彩带ribbon CSS Code .ribbon {width:0;height:100px;border-left:50px solid red;border-right:50px solid red;border-bottom:35px solid transparent
} 效果 上面就用CSS制作的32种图形效果当然大家还可以发挥你的想像和创造制作一些更精美的图形。 扩展阅读 The Shapes of CSSDrawing with CSS3 Tips little more纯CSS制作的图形效果 那么今天就说到这里了如果大家有更多的效果制作方法请在下面的评论中分享。 如需转载烦清注明出处W3CPLUS
