CSS3学习
最近在面试中,而CSS3目前成为我的一大问题,了解的太少,所以在面试中,碰到这样的问题,我就感觉到有点无力,只能说点相关的东西,但是总差那么一些,所以我决定开始积累有关CSS3的知识和问到的问题,其中关于三角形和扇形的问题,360的面试中被问到,此篇博客长期更新
绘制正方形、三角形、扇形和饼状图
transparent(透明色)、transform: rotate(0deg)(旋转)、clip属性剪裁
clip: rect (top, right, bottom, left) 设置元素的形状
正方形
<div class="square"></div>
.square{
width : 0;
height: 0;
border-width:100px;
border-style:solid;
border-color: red blue green yellow;
}
本着好玩的态度,我又做了下面这样子,在上面的样式中加上了下面的
padding:30px;
三角形
其实和上面的是有相似点的,将四个三角形中其中一个设置为透明色transparent
.triange{
width : 0;
height: 0;
border-width:100px;
border-style:solid;
border-color: red transparent transparent transparent;
}
当然也是可以这样做的
.square{
width : 0;
height: 0;
border-right: 50px solid transparent;
border-left: 50px solid transparent;
border-bottom: 100px solid red;
}
在实验的过程中发现了,也可以这样子
.square{
width : 0;
height: 0;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
}
饼状图
.circle{
width : 0;
height: 0;
border-width: 100px;
border-style: solid;
border-color: red blue green yellow;
border-radius: 100px;
}
扇形
还是借助transparent来实现
.square{
width : 0;
height: 0;
border-width: 100px;
border-style: solid;
border-color: transparent transparent green transparent;
border-radius: 100px;
}
任意角度的扇形
原理:首先其实这里面是有三个圆的,用黄色的圆当作背景,其他的两个圆是绝对定位的,这个跟clip:rect(..)有关系的,clip将两个圆剪切为半个圆(上边为0,右边为半径,下边为直径,左边为0),然后任意角度的形成就取决这两个半圆如何旋转,正角度向右边旋转
点击此处自己尝试任意角度
<div class="shanxing">
<div class="square"></div>
<div class="square1"></div>
</div>
.shanxing {
position: relative;
width: 200px;
height : 200px;
border-radius: 100px;
background:yellow;
}
.square{
position:absolute;
width:200px;
height:200px;
border-radius:100px;
background-color:red;
clip:rect(0px, 100px, 200px, 0px);
transform: rotate(90deg);
}
.square1 {
position:absolute;
width:200px;
height:200px;
border-radius:100px;
background-color:green;
clip:rect(0px, 100px, 200px, 0px);
transform: rotate(0deg);
}
为了明显,我将square、square1的颜色设置为红色和绿色,只需要看黄色的部分,这个就是形成的扇形