CSS3学习

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的颜色设置为红色和绿色，只需要看黄色的部分，这个就是形成的扇形