正文
css写的常见图形
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
.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:;
height:;
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:;
height:;
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:;
left:;
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.
翻译：爱一个人太深，心会醉；恨一个人太久，心会碎。
