css實現圓,半圓,四分之一圓和其他幾何圖形畫法
阿新 • • 發佈:2019-01-10
畫四分之一圓的時候,是畫出一個圓並且結合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: 100 px;
border-radius: 50%;
background: black;
}
5.沿橫軸、縱軸劈開的半橢圓
<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: 200 px;
height: 150px;
border-radius: 100% 0 0 100%/50%;
background: black;
}
6.四分之一橢圓
<div class="quarter-ellipse">
</div>
.quarter-ellipse{
width: 200px;
height: 150px;
border-radius: 100% 0 0 0;
background: black;
}
7.菱形
如果想讓形狀變形,但是裡邊的字型不變形
思路:
變形之後,再讓裡邊內容旋轉回來
<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 。