标签：一个人 椭圆 技术分享 spec pre css 属性 text position
一直都没有为css的分类写点东西，今天找了一些资料来写一写这个css的常见图形，开发中会用到的哦！
从最简单的正方形说：
width: 100px;
height: 100px;
background: red;
长方形：
width: 200px;
height: 100px;
background: red;
圆：
width: 100px;
height: 100px;
background: red;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
椭圆：
width: 200px;
height: 100px;
background: red;
-moz-border-radius: 100px / 50px;
-webkit-border-radius: 100px / 50px;
border-radius: 100px / 50px;
上三角：
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
下三角：
#triangle-down { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-top: 100px solid red;
左三角：
width: 0;
height: 0;
border-top: 50px solid transparent;
border-right: 100px solid red;
border-bottom: 50px solid transparent;
右三角：
width: 0;
height: 0;
border-top: 50px solid transparent;
border-left: 100px solid red;
border-bottom: 50px solid transparent;
左上三角：
width: 0;
height: 0;
border-top: 100px solid red;
border-right: 100px solid transparent;
右上三角：
width: 0;
height: 0;
border-top: 100px solid red;
border-left: 100px solid transparent;
右下三角：
width: 0;
height: 0;
border-bottom: 100px solid red;
border-left: 100px solid transparent;
左小三角：
width: 0;
height: 0;
border-bottom: 100px solid red;
border-right: 100px solid transparent;
梯形：
border-bottom: 100px solid red;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
height: 0;
width: 100px;
还有一个对话框：
#talkbubble { width: 120px; height: 80px; background: red; position: relative; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; } #talkbubble:before { content:""; position: absolute; right: 100%; top: 26px; width: 0; height: 0; border-top: 13px solid transparent; border-right: 26px solid red; border-bottom: 13px solid transparent; }
恩，好，常见的图形这些差不多了，那么直角梯形，平行四边形怎么搞呢？还有保证里面的文字是正的。
看代码：
html <div class="btn">home</div> css : .btn{ position: relative; width: 150px; height: 40px; text-align: center; line-height: 40px; } .btn:after{ position:absolute; content: ‘‘; width: 100%; height: 100%; top: 0; left: 0; background-color: #fb3; z-index: -1; /* 保证背景不会覆盖住文字 */ transform: skew(-45deg); -moz-transform: skew(-45deg); -ms-transform: skew(-45deg); -webkit-transform: skew(-45deg); }
那么这这直角梯形呢
这个就需要这个css3中的perspective的属性，放在父元素上，然后在子元素上写transform的样式：
html <div class="parent"> <div class="child"> </div> </div> <p></p> <div class="parent2"> <div class="child"> </div> </div> css: .parent { width: 100px; height: 100px; background-color: #ddd; background-color: #fb3; transform: perspective(20px) rotatex(5deg); transform-origin: right; } .parent2 { width: 100px; height: 100px; background-color: #ddd; background-color: #fb3; transform: perspective(20px) rotatex(5deg); transform-origin: left; }
html <div class="parent3"> <div class="child"> </div> </div> css: .parent3 { width: 100px; height: 100px; background-color: #ddd; background-color: #fb3; transform: perspective(20px) rotatex(-5deg); transform-origin: left; }
下面的倒梯形，就只需要在正梯形的基础上，将rotate(-5deg);
上面提到：背景图形有旋转变化，但是里面的文字去不能失真，上面用伪元素的方法可以实现，也可以这样做，父元素可以旋转正的多少度，然后他的子元素在旋转这个负的这个度数 就OK了；
父元素： .messages_margin20>div>div>div:nth-of-type(2)>a{ border-radius: 10px; transform: skew(-30deg); display: block; background: linear-gradient(to right, #a20000, #8e0000, #a20000); -moz-transform: skew(-30deg); -ms-transform: skew(-30deg); -webkit-transform: skew(-30deg); } 子元素： .messages_margin20>div>div>div:nth-of-type(2)>a .messages_col { transform: skew(30deg); -moz-transform: skew(30deg); -ms-transform: skew(30deg); -webkit-transform: skew(30deg); }
（这个代码源于今日的工作项目中的内容）
每日一句：Love a person too much,the heart will be drunk; hate a person too long,the heart will be broken.
翻译：爱一个人太深，心会醉；恨一个人太久，心会碎。
标签：一个人 椭圆 技术分享 spec pre css 属性 text position
原文地址：http://www.cnblogs.com/adouwt/p/6486483.html
