摘要:本篇教程介绍了HTML+CSS入门 CSS写的常见图形,希望阅读本篇文章以后大家有所收获,帮助大家HTML+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);
}
本文由职坐标整理发布,欢迎关注职坐标WEB前端HTML/CSS频道,获取更多HTML/CSS知识!
您输入的评论内容中包含违禁敏感词
我知道了
请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了,明天再试试吧!
我们会在第一时间安排职业规划师联系您!
您也可以联系我们的职业规划师咨询:
版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
沪公网安备 31011502005948号