用CSS3實現一個圖形

一、實現一個三角形

HTML:<div class="block"></div>

CSS：

.block{
	width:0;
    height:0;
	border-right:50px solid transparent;
	border-left:50px solid transparent;
	border-bottom:50px solid red;
}

效果圖：

二、實現一個自適應寬度的正方形

HTML:<div class="block"></div>

• 法一：vw單位

.block{
    width: 10%;
    height: 10vw; 
    background-color: red;
}

效果圖：

說明：

vw是相對於視口寬度百分比的單位（1vw=1% viewport width）
vh是相對於視口高度百分比的單位（1vh=1% viewport height）
vmin是相對當前視口寬高中較小的一個百分比單位
vmax是相對當期視口寬高中較大的一個百分比單位

法二：設置垂直方向的padding撐開容器

利用百分比數值的padding-bottom屬性撐開容器內部空間：margin、padding的百分比數值是相對父元素寬度的寬度計算的，因此可將元素垂直方向的一個padding值設定爲與width相同的百分比。

.block{
    width: 10%;
    height: 0;
    padding-bottom: 10%;
    background-color: purple;
}

效果圖：

• 法三：利用僞元素的margin(padding)-top撐開容器

.block {
    width: 10%;
    overflow: hidden;
    background-color: pink;
}
.block:after {
    content: '';
    display: block;
    margin-top: 100%; /* margin 百分比相對父元素寬度計算 */
}

效果圖：

注：
（1）若不使用overflow: hidden;刷新頁面沒有東西出現，這是由於容器和僞元素在垂直方向上發生了外邊距重疊，所以撐開父元素的高度並沒有出現。
（2）應對的方法是在父元素上觸發BFC（若在垂直方向的padding撐開父元素，則不需要觸發BFC ）

三、實現一個愛心

HTML：<div class="heart"></div>

CSS：

.heart{
    position: relative;
    width: 200px;
    height: 200px;
}
.heart:before{
    position: absolute;
    left: 20px;
    width: 80px;
    height: 120px;
    content: '';
    background-color: red;
    border: 0 solid transparent;
    border-radius: 100px 100px 0 0;
    transform: rotate(-45deg);
}
.heart:after{
    position: absolute;
    top: 0;
    left: 48px;
    width: 80px;
    height: 120px;
    content: '';
    background-color: red;
    border: 0 solid transparent;
    border-radius: 100px 100px 0 0;
    transform: rotate(45deg);
}

效果圖：