正方形 / 长方形
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.square {
width: 120px;
height: 120px;
background-color: #0000FF;
}
</style>
</head>
<body>
<div class="square"></div>
</body>
</html>
圆形
要使用CSS来制作一个圆形,我们需要一个div,设class为circle。
圆形在设置CSS时要设置宽度和高度相等,然后设置border-radius属性为宽度或高度的一半即可:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.circle {
width: 120px;
height: 120px;
background: blue;
border-radius: 60px;
}
</style>
</head>
<body>
<div class="circle"></div>
</body>
</html>
椭圆
设置椭圆形的CSS时,高度要设置为宽度的一半,border-radius属性也要做相应的改变:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.oval {
width: 200px;
height: 100px;
background: blue;
border-radius: 100px / 50px;
}
</style>
</head>
<body>
<div class="oval"></div>
</body>
</html>
三角形 / 倒三角 / 左三角 / 右三角
要创建一个CSS三角形,需要使用border,通过设置不同边的透明效果,我们可以制作出三角形的现状。另外,在制作三角形时,宽度和高度要设置为0。
/*正三角*/
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#triangle {
width: 0;
height: 0;
border-bottom: 100px solid #fcf921;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
}
</style>
</head>
<body>
<div id="triangle"></div>
</body>
</html>
/*倒三角*/
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#triangle {
width: 0;
height: 0;
border-top: 100px solid #fcf921;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
}
</style>
</head>
<body>
<div id="triangle"></div>
</body>
</html>
/*左三角*/
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#triangle {
width: 0;
height: 0;
border-top: 70px solid transparent;
border-left: 140px solid #6bbf20;
border-bottom: 70px solid transparent;
}
</style>
</head>
<body>
<div id="triangle"></div>
</body>
</html>
/*右三角*/
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#triangle {
width: 0;
height: 0;
border-top: 70px solid transparent;
border-right: 140px solid #6bbf20;
border-bottom: 70px solid transparent;
}
</style>
</head>
<body>
<div id="triangle"></div>
</body>
</html>
菱形
两个三角形拼起来
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#triangle1 {
width: 0;
height: 0;
border-bottom: 100px solid #fcf921;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
}
#triangle2 {
width: 0;
height: 0;
border-top: 100px solid #fcf921;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
}
</style>
</head>
<body>
<div id="triangle1"></div>
<div id="triangle2"></div>
</body>
</html>
梯形
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#trapezium {
width:50px;
height:50px;
border-right:50px solid transparent;
border-bottom:50px solid green;
border-left:50px solid transparent;
}
</style>
</head>
<body>
<div id="trapezium"></div>
</body>
</html>
心形
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#heart {
position: relative;
}
#heart:before,#heart:after {
content: "";
width: 70px;
height: 115px;
position: absolute;
background: red;
left: 70px;
top: 0;
border-radius: 50px 50px 0 0;
transform: rotate(-45deg);
transform-origin: 0 100%;
}
#heart:after {
left: 0;
transform: rotate(45deg);
transform-origin: 100% 100%;
}
</style>
</head>
<body>
<div id="heart"></div>
</body>
</html>
吃豆人
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.box
{
width:0px;
height:0px;
border-top:50px solid yellow;
border-right:50px solid transparent;
border-bottom:50px solid yellow;
border-left:50px solid yellow;
border-radius: 50px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>