css实现三角形、圆形
1、实现圆形的思路:正方形,圆角50%
代码如下:
<style>
div{
width: 200px;
height: 200px;
border-radius: 50%;
background-color: red;
}
</style>
<body>
<div></div>
</body>
2、实现三角形(用border实现,原理:两条边平分一个角)
代码如下:
<style>
div{
width: 0.1px;
border-top: 50px solid rgb(252, 2, 2);
border-bottom: 50px solid rgba(253, 253, 2);
border-left: 50px solid blue;
border-right: 50px solid rgb(1, 129, 1);
}
</style>
<body>
<div></div>
</body>
运行结果如下:
如上图所示,我们看到了4个三角形,如果只需要一个,那么就可以将其他三条边设为透明。
<style>
div{
width: 0.1px;
border-top: 50px solid rgb(252, 2, 2,0);
border-bottom: 50px solid rgba(253, 253, 2,0);
border-left: 50px solid blue;
border-right: 50px solid rgb(1, 129, 1,0);
}
</style>