CSS3技术

body

<div class="chape1"></div>
<hr>
<div class="chape2"></div>
<hr>
<div class="heart"></div>
<hr>

<div class="stage s1">
    <div class="container">
            <div class="side top">top</div>
            <div class="side left">left</div>
            <div class="side right">right</div>
    </div>
</div>

css

.chape1 {
    width: 120px;
    height: 120px;
    background: red;
    margin: 60px auto;
    /*逆时针旋转45*/
    transform: rotate(-45deg);
    /*以右上角为原点进行旋转*/
    transform-origin: 0 100%;

}

.chape2 {
    width: 200px;
    height: 120px;
    background: red;
    margin: 60px auto;
    transform: skew(30deg);
}

.heart {
    position: relative;
    margin: 150px auto;
    width: 120px;
}
.heart:before,.heart:after{
    content: "";
    width:70px;
    height: 115px;
    position: absolute;
    left: 70px;
    top: 0;
    background: red;
    border-radius: 50px 50px 0 0;
    transform: rotate(-45deg);
    transform-origin:  0 100%;
}
.heart:after{
    left: 0;
    transform: rotate(45deg);
    transform-origin:  100% 100%;
}

.side {
    height: 100px;
    width: 100px;
    position: absolute;
}

.top {
    transform: rotate(-45deg) skew(15deg,15deg);
}