css实现圆，半圆，四分之⼀圆和其他⼏何图形画法
画四分之⼀圆的时候，是画出⼀个圆并且结合overflow等实现，但是其实可以直接画出半圆或者四分之⼀圆，之前忽略了⼏个属性。圆的画法：先画相应矩形，在⽤border-radius
1.画出圆
{
width:100px;
height:100px;
border-radius:50px;
}
2.画出⽅向四个不同的本圆
.top
{
width: 100px;
height: 50px;
border-radius: 50px 50px 0 0;
}
.right{
height: 100px;
width: 50px;
border-radius: 0 50px 50px 0;
}
.bottom{
width: 100px;
height: 50px;
border-radius: 0 0 50px 50px;
}
.left{
width: 50px;
height: 100px;
border-radius: 50px 0 0 50px;
}
3.画出四分之⼀个圆⽅法：
{
width:50px;
height:50px;
border-radius:50px 0 0 0;
}
4.椭圆
<div class="ellipse">
</div>
.ellipse{
width: 200px;
height: 100px;
border-radius: 50%;
background: black;
}
5.沿横轴、纵轴劈开的半椭圆
6.
四分之⼀椭圆
7.菱形
如果想让形状变形，但是⾥边的字体不变形
思路： 变形之后，再让⾥边内容旋转回来
<div  class ="x-ellipse">
</div >
<div  class ="y-ellipse">
</div >
.x-ellipse{
width: 200px;
height: 150px;
border-radius: 50%/ 100% 100% 0 0;
/*相当于50% 50% 50% 50%/ 100% 100% 0 0;*/
background: black;
}
.y-ellipse{
width: 200px;
height: 150px;
border-radius: 100% 0 0 100%/50%;
background: black;}
<div  class ="quarter-ellipse">
</div >
.quarter-ellipse{
div border属性
width: 200px;
height: 150px;
border-radius: 100% 0 0 0;
background: black;
}
<div class="paralle"><p>transform:skew()</p></div>
.paralle {
position: relative;
left: 100px;
width:200px;
height: 100px;
background:#44a5fc;
line-height: 100px;
text-align: center;
font-weight: bolder;
transform: skew(-20deg);
}
.paralle p{
transform: skew(20deg);
}
8.三⾓形
#triangle-up{
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid lightblue;
}
#triangle-down{
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid lightblue;
}
#triangle-left{
width: 0;
height: 0;
border-top: 50px solid transparent;
border-right: 100px solid lightblue;
border-bottom: 50px solid transparent;
}
#triangle-right{
width: 0;
height: 0;
border-top: 50px solid transparent;
border-left: 100px solid lightblue;
border-bottom: 50px solid transparent;
}
#triangle-topleft{
width: 0;
height: 0;
border-top: 100px solid lightblue;
border-right: 100px solid transparent;
}
#triangle-topright{
width: 0;
height: 0;
border-top: 100px solid lightblue;
border-left: 100px solid transparent;
}
#triangle-bottomleft{
width: 0;
height: 0;
border-bottom: 100px solid lightblue;
border-right: 100px solid transparent;
}
#triangle-bottomright{
width: 0;
height: 0;
border-bottom: 100px solid lightblue;
border-left: 100px solid transparent;
}
9.⼀些属性的说明
border-radius:50px 0 0 0
等价于将border-raduis属性分成四个属性来设置，把⼀个圆分成上左，上右，下右，下左4份 border-top-left-radius:
border-top-right-radius:
border-bottom-right-radius:
border-bottom-left-radius:
⾸选需要了解border-radius
border-radius可以是元素也可是百分⽐。
border-radius:border-top-left-radius,border-top-right-radius, border-bottom-right-radius,border-bottom-left-radius;
不仅仅可以为四个⾓分别设置值，甚⾄可以给每个⾓提供⽔平和垂直半径 ⽅法是在斜杠前指定 1~4 个值，在斜杠后指定另外 1~4 个值
举例来说，
当 border-radius 的值为10px / 5px 20px 时，
其效果相当于 10px 10px 10px 10px / 5px 20px 5px 20px 。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。