CSS实现各种形状示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css3实现各种形状</title>
<style type="text/css">
div{
display:inline-block;
}
#circle{
height: 120px;
width: 120px;
background-color: chocolate;
-moz-border-radius: 60px;
-webkit-border-radius: 60px;
border-radius: 60px;
}
#oval{
/*椭圆形*/
width: 200px;
height: 100px;
background-color: cornflowerblue;
/*两种设置方式 / 号之前的数字代表水平半径 之后的数字代表垂直半径*/
/*-moz-border-radius: 100px/50px;*/
/*-webkit-border-radius: 100px/50px;*/
/*border-radius: 100px/50px;*/
/*代表圆的半径 纵向横向都是50%*/
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
}
#triangle-orign{
/*三角形原理*/
width: 100px;
height: 100px;
background-color: black;
border-top: 140px solid #113322;
border-left: 140px solid #4400ff;
border-right: 140px solid crimson ;
border-bottom: 140px solid lightseagreen;
}
#triangle{
/*三角形*/
width: 0;
height: 0;
border-bottom: 140px solid #8855ff;
border-left:70px solid transparent;
border-right: 70px solid transparent;
}
#triangle-down{
/*朝下的三角形*/
width: 0;
height: 0;
border-top: 140px solid blue;
border-left: 70px solid transparent;
border-right: 70px solid transparent;
}
#triangle-left{
width: 0px;
height: 0px;
border-left: 140px solid coral;
border-top: 70px solid transparent;
border-bottom: 70px solid transparent;
}
#triangle-right{
width: 0px;
height: 0px;
border-right: 140px solid magenta;
border-top: 70px solid transparent;
border-bottom: 70px solid transparent;
}
</style>
</head>
<body>
<div id="shapes">
<!--圆形-->
<div id="circle"></div>
<!--椭圆-->
<div id="oval"></div>
<!--三角形原型-->
<div id="triangle-orign"></div>
<!--三角形-->
<div id="triangle"></div>
<div id="triangle-down"></div>
<div id="triangle-left"></div>
<div id="triangle-right"></div>
</div>
</body>
</html> 相关推荐
猫沙盆 2020-07-07
葉無聞 2020-06-09
buttonChan 2020-04-10
sdbxpjzq 2019-12-03
沈宫新 2020-02-23
sdbxpjzq 2019-11-04
sdbxpjzq 2019-10-26
zengni 2019-10-21
libowen0 2014-07-08
猫沙盆 2017-05-04
zhouguizhi 2018-02-14
ZiXuanFY 2007-04-12
淡风wisdon大大 2019-08-01
我就是停不下来 2019-07-01
jiedinghui 2019-07-01
wangnantjobj 2019-07-01
yongquanx 2019-07-01