.oval {
width: 200px;
height: 100px;
background-color: deepskyblue;
/* “/”前面的值设置其水平半径，“/”后面值设置其垂直半径 */
border-radius: 100px / 50px;
}
椭圆
.triangle-up,
.triangle-down,
.triangle-left,
.triangle-right {
display: inline-block;
}
/*上三角形*/
.triangle-up {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 50px solid deepskyblue;
}
/*下三角形*/
.triangle-down {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 50px solid deepskyblue;
}
/*左三角形*/
.triangle-left {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
border-left: 50px solid deepskyblue;
}
/*右三角形*/
.triangle-right {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
border-right: 50px solid deepskyblue;
}
上下左右三角形
.triangle-topLeft,
.triangle-topRight,
.triangle-bottomLeft,
.triangle-bottomRight {
display: inline-block;
}
/*左上角*/
.triangle-topLeft {
width: 0;
height: 0;
border-top: 100px solid deepskyblue;
border-right: 100px solid transparent;
}
/*右上角*/
.triangle-topRight {
width: 0;
height: 0;
border-top: 100px solid deepskyblue;
border-left: 100px solid transparent;
}
/*左下角*/
.triangle-bottomLeft {
width: 0;
height: 0;
border-bottom: 100px solid deepskyblue;
border-right: 100px solid transparent;
}
/*右下角*/
.triangle-bottomRight {
width: 0;
height: 0;
border-bottom: 100px solid deepskyblue;
border-left: 100px solid transparent;
}
左上，右上，左下，右下 角
/*箭头*/
.curvedarrow {
position: relative;
width: 0;
height: 0;
border-top: 27px solid transparent;
border-right: 27px solid deepskyblue;
transform: rotate(10deg);
}
.curvedarrow:after {
position: absolute;
top: -36px;
left: -27px;
width: 36px;
height: 36px;
content: '';
border: 0 solid transparent;
border-top: 6px solid deepskyblue;
border-radius: 60px 0 0 0;
transform: rotate(45deg);
}
箭头
/*平行四边形*/
.parallelogram {
width: 100px;
height: 100px;
background-color: deepskyblue;
transform: skew(30deg);
}
平行四边形
/*梯形*/
.trapezoid {
width: 100px;
height: 0;
border-right: 25px solid transparent;
border-bottom: 100px solid deepskyblue;
border-left: 25px solid transparent;
}
梯形
/*五边形*/
.pentagon {
position: relative;
width: 54px;
border-width: 50px 18px 0;
border-style: solid;
border-color: deepskyblue transparent;
box-sizing: content-box;
}
.pentagon:after {
position: absolute;
top: -85px;
left: -18px;
height: 0;
width: 0;
content: '';
border-width: 0 45px 35px;
border-style: solid;
border-color: transparent transparent deepskyblue;
}
五边形
/*六边形*/
.hexagon {
position: relative;
width: 100px;
height: 55px;
background-color: deepskyblue;
}
.hexagon:before,
.hexagon:after {
content: '';
position: absolute;
left: 0;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
}
.hexagon:before {
top: -25px;
border-bottom: 25px solid deepskyblue;
}
.hexagon:after {
bottom: -25px;
border-top: 25px solid deepskyblue;
}
六边形
/*爱心*/
.heart {
position: relative;
width: 100px;
height: 90px;
}
.heart:before,
.heart:after {
position: absolute;
left: 50px;
top: 0;
width: 50px;
height: 80px;
content: '';
background-color: deepskyblue;
border-radius: 50px 50px 0 0;
transform: rotate(-45deg);
transform-origin: 0 100%;
}
.heart:after {
left: 0;
transform: rotate(45deg);
transform-origin: 100% 100%;
}
爱心
/*无穷大*/
.infinity {
position: relative;
width: 150px;
height: 100px;
box-sizing: content-box;
}
.infinity:before,
.infinity:after {
position: absolute;
top: 0;
left: 0;
width: 30px;
height: 30px;
content: '';
border: 20px solid deepskyblue;
border-radius: 50px 50px 0 50px;
box-sizing: content-box;
transform: rotate(-45deg);
}
.infinity:after {
left: auto;
right: 0;
border-radius: 50px 50px 50px 0;
transform: rotate(45deg);
}
无穷大
/*钻石*/
.diamond {
position: relative;
width: 50px;
height: 0;
border-width: 0 25px 25px 25px;
border-style: solid;
border-color: transparent transparent deepskyblue transparent;
box-sizing: content-box;
}
.diamond:after {
position: absolute;
top: 25px;
left: -25px;
width: 0;
height: 0;
content: '';
border-width: 70px 50px 0 50px;
border-style: solid;
border-color: deepskyblue transparent transparent transparent;
}
钻石
/*锁*/
.lock {
position: relative;
width: 90px;
height: 65px;
border: 18px solid deepskyblue;
border-right-width: 37px;
border-left-width: 37px;
border-radius: 10px;
box-sizing: border-box;
}
.lock:before,
.lock:after {
position: absolute;
left: 50%;
box-sizing: border-box;
transform: translateX(-50%);
}
.lock:before {
top: -60px;
width: 70px;
height: 60px;
content: '';
border: 12px solid deepskyblue;
border-top-left-radius: 35px;
border-top-right-radius: 35px;
}
.lock:after {
top: -5px;
width: 25px;
height: 40px;
content: '';
border: 5px solid deepskyblue;
border-radius: 12px;
}
锁
/* 吃豆人 */
.pacman {
width: 0;
height: 0;
border: 60px solid deepskyblue;
border-right: 60px solid transparent;
/*border-left: 60px solid transparent;*/
border-radius: 60px;
}
吃豆人
/* 对话泡泡 */
.talkbubble {
position: relative;
width: 120px;
height: 80px;
background-color: deepskyblue;
border-radius: 10px;
}
.talkbubble:before {
position: absolute;
top: 26px;
right: 100%;
content: '';
width: 0;
height: 0;
border-right: 26px solid deepskyblue;
border-top: 13px solid transparent;
border-bottom: 13px solid transparent;
}
对话泡泡
/* 太极 */
.supermepole {
position: relative;
width: 96px;
height: 48px;
background-color: #FFF;
border-width: 2px 2px 50px 2px;
border-style: solid;
border-radius: 50%;
box-sizing: content-box;
}
.supermepole:before,
.supermepole:after {
position: absolute;
top: 50%;
content: '';
width: 12px;
height: 12px;
border-radius: 50%;
box-sizing: content-box;
}
.supermepole:before {
background-color: #FFF;
left: 0;
border: 18px solid #000;
}
.supermepole:after {
background-color: #000;
left: 50%;
border: 18px solid #FFF;
}
太极
/* 丝带徽章 */
.badge-ribbon {
position: relative;
height: 100px;
width: 100px;
background-color: deepskyblue;
border-radius: 50%;
}
.badge-ribbon:before,
.badge-ribbon:after {
position: absolute;
top: 70px;
left: -10px;
content: '';
border-right: 40px solid transparent;
border-left: 40px solid transparent;
border-bottom: 70px solid deepskyblue;
transform: rotate(-140deg);
}
.badge-ribbon:after {
right: -10px;
left: auto;
transform: rotate(140deg);
}
丝带徽章
/* 雪佛兰车标 */
.chevolet {
position: relative;
width: 140px;
height: 50px;
}
.chevolet:before,
.chevolet:after {
position: absolute;
top: 0;
width: 50%;
height: 100%;
background-color: deepskyblue;
content: '';
}
.chevolet:before {
transform: skew(0deg, 6deg);
}
.chevolet:after {
right: 0;
transform: skew(0deg, -6deg);
}
雪佛兰车标
/* 放大镜 */
.magnifying-glass {
position: relative;
width: 60px;
height: 60px;
font-size: 150px;
border: 10px solid deepskyblue;
border-radius: 50%;
box-sizing: content-box;
}
.magnifying-glass:before {
position: absolute;
right: -40px;
bottom: -30px;
width: 60px;
height: 15px;
content: '';
background-color: deepskyblue;
transform: rotate(45deg);
}
放大镜
/* facebook-icon */
.facebook-icon {
position: relative;
width: 100px;
height: 110px;
background-color: deepskyblue;
border: 15px solid deepskyblue;
border-bottom: 0;
border-radius: 5px;
box-sizing: content-box;
overflow: hidden;
}
.facebook-icon:before,
.facebook-icon:after {
position: absolute;
content: '';
box-sizing: content-box;
}
.facebook-icon:before {
right: -37px;
bottom: -30px;
width: 40px;
height: 90px;
background-color: deepskyblue;
border: 20px solid #fff;
border-radius: 25px;
box-sizing: content-box;
}
.facebook-icon:after {
top: 50px;
right: 5px;
width: 55px;
height: 20px;
background-color: #FFF;
}
facebook图标
/* 月亮 */
.moon {
width: 80px;
height: 80px;
border-radius: 50%;
box-shadow: 15px 15px 0 0 deepskyblue;
}
月亮
/* 圆锥 */
.cone {
width: 0;
height: 0;
border-radius: 50%;
border-top: 80px solid deepskyblue;
border-left: 80px solid transparent;
border-right: 80px solid transparent;
}
圆锥
/* 十字架 */
.cross {
position: relative;
width: 20px;
height: 100px;
background-color: deepskyblue;
}
.cross:before {
top: 40px;
left: -40px;
content: '';
position: absolute;
width: 100px;
height: 20px;
background-color: deepskyblue;
}
十字架
/* 谷堆 */
.base {
position: relative;
width: 100px;
height: 50px;
background-color: deepskyblue;
}
.base:before {
position: absolute;
top: -35px;
width: 0;
height: 0;
content: '';
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 35px solid deepskyblue;
}
谷堆
/* 指示器 */
.pointer {
position: relative;
width: 120px;
height: 40px;
background-color: deepskyblue;
}
.pointer:before,
.pointer:after {
position: absolute;
content: '';
width: 0;
height: 0;
}
.pointer:before {
left: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 20px solid #fff;
}
.pointer:after {
right: -20px;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 20px solid deepskyblue;
}
指示器