各种 demo:
1、CSS 实现正方形
思路:width 为 0;height 为 0;使用 boder-width 为正方形的边长的一半,不占任何字节;border-style 为固体;border-color 为正方形的填充色。
- .triangle {
- width: 0;
- height: 0;
- border - width: 30px;
- border - style: solid;
- border - color: #e66161;
- }
图形
2、css 实现三角形
思路:宽度 width 为 0;height 为 0;border-width 为直角三角形斜边的一半;border-color 里有四个颜色属性,第一个为上 -- 直角三角形内充填充色,第二个为右 -- 直角三角形内填充色,第三个为下 -- 直角三角形内填充色,第四个为左 -- 直角三角形内填充色。
代码:
- .triangle {
- width: 0;
- height: 0;
- border - width: 30px;
- border - style: solid;
- border - color: #000000 transparent transparent transparent;
- }
图形
代码:
- .triangle {
- width: 0;
- height: 0;
- border - width: 30px;
- border - style: solid;
- border - color: #000000#000000 transparent transparent;
- }
图形
代码:
- .triangle {
- width: 0;
- height: 0;
- border - width: 30px;
- border - style: solid;
- border - color: #000000#f50303 transparent transparent;
- }
图形
3、css 实现正方形外梯形
思路:还是之前的思路,width 为 20;高度为 20;梯形的短底边为 div 的 width;梯形的长边 = width+border-width*2;
代码:
- .triangle {
- width: 20px;
- height: 20px;
- border - width: 30px;
- border - style: solid;
- border - color: #000000 transparent transparent transparent;
- }
图形:
代码:
- .triangle {
- width: 0;
- height: 0;
- border - width: 30px;
- border - style: solid;
- border - color: #e66161#f3bb5b#94e24f#85bfda;
- }
图形:
4、css 实现这个图形
思路:利用两个三角形进行拼接,一个是背景色,一个是边框色,然后利用定位重叠在一起,定位要相差一个像素。
代码:
- .box {
- position: relative;
- width: 240px;
- height: 60px;
- line - height: 60px;
- background: #e9fbe4;
- box - shadow: 1px 2px 3px#e9fbe4;
- border: 1px solid#c9e9c0;
- border - radius: 4px;
- text - align: center;
- color: #0c7823;
- }.triangle - border {
- width: 0;
- height: 0;
- border - width: 10px;
- border - style: solid;
- position: absolute;
- left: 30px;
- overflow: hidden;
- }.border {
- bottom: -20px;
- border - color: #C9E9C0 transparent transparent transparent;
- }.background {
- bottom: -19px;
- border - color: #E9FBE4 transparent transparent transparent;
- }
- 我是利用border属性实现
5、css 实现
来源: http://www.cnblogs.com/chengxs/p/7242647.html