css实现一个扇形或三角形
css实现三角形
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
div{
height: 0;
width: 0;
border-width: 50px;
border-style: solid;
border-color: transparent #ff0 transparent transparent;
}
</style>
<body>
<div></div>
</body>
</html>
思路: border有4个边,在没有宽高的情况下,每个边其实都会变成一个三角形,我们需要哪个,就把哪个三角形设成我们想要的颜色,其余的为透明色(transparent)
css实现扇形
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
div{
height: 0;
width: 0;
border-width: 50px;
border-style: solid;
border-color: transparent #ff0 transparent transparent;
border-radius: 50%;
}
</style>
<body>
<div></div>
</body>
</html>
思路: 和实现一个三角形思路是一样的,只是多了一个圆角
