用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);
}

效果图：