.aly-tooltip { display: inline-block; padding:...
.aly-tooltip { display: inline-block; padding: 5px; padding-left: 15px; padding-right: 15px; background: #FFFFFF; border: 1px solid #D7D8D9; box-shadow: 0 0 15px 0 rgba(0,0,0,0.15); position: relative; left: 10px; font-size: 12px; width: auto; color: #777F84;}.aly-tooltip::before { content: ""; position: absolute; display: inline-block; width: 10px; height: 10px; border: 1px solid #ddd; border-right: None; border-top: none; transform: rotate(45deg); top: 8px; left: -6px; background: #fff; box-shadow: -1px 1px 2px #ddd;}以上就是一个对话框，小角的颜色可随意换
一直都没有为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.
翻译：爱一个人太深，心会醉；恨一个人太久，心会碎。
版权声明
本文仅代表作者观点，不代表百度立场。
本文系作者授权百度百家发表，未经许可，不得转载。
